[想试试看JavaScript ] 事件物件

事件物件

事件物件很常跟事件处理一起配着使用
浏览器会主动收集和事件有关系的资讯，并制造出 Event Object 事件物件。
浏览器会把我们做的事情纪录在事件物件里面，并且用参数的形式传进事件处理器里面。
我们只要使用事件物件，这样我们就可以知道我们在网页上做了什麽事情罗

语法

语法:

var handler=function(事件物件){
    
}

handler 代表事件处理函式

范例

那麽来做个范例练习一下
这个范例就是，用滑鼠在浏览器上点击一个按钮，就会告诉我们滑鼠的座标

首先，先做个按钮，给按钮一个 id 叫做 btn 好了

<body>
<button id="btn">Btn</button>
</body>

接着，让网页一载入就可以执行，我使用 load 事件来执行函式
在 body 标签上面注册 load 事件，body 标签里面的内容载入完毕就执行函式 init 里面的内容。

<script>
function init(){

};
</script>
<body onload="init();">
<button id="btn">Btn</button>
</body>

使用 HTML DOM，定义一个变数 btn ，抓取 button 的节点
并在上面注册 click 事件

<script>
function init(){
var btn=document.getElementById("btn")
btn.addEventListener('click',handler);
};
</script>
<body onload="init();">
<button id="btn">Btn</button>
</body>

我希望点了按钮後可以得到按钮的座标位置。
我可以使用 event.clintX、event.clientY

<script>
function init(){
    var btn=document.getElementById("btn");
    var handler=function(event){   // 变数 event 代表事件物件
        alert(event.clientX+","+event.clientY);
    }
    btn.addEventListener('click',handler);
}
</script>
<body onload="init()">
<button id="btn">Btn</button>
</body>