嵌入式
<button οnclick='alert("hello")'>点击按钮</button>
脚本模型
btn.onclick=function(){}
下面两种方法效果是一样的
document.getElementById("target").onclick();
document.getElementById("target").click();
备注:
btnObj.click()是真正地用程序去点击按钮,触发了按钮的 onclick()事件
btnObj.onclick()只是简单地调用了btnObj的onclick所指向的方法,只是调用方法而已,并未直接触发事件
W3C事件写法
添加事件:appEventListener(事件名,事件函数,false )
btn.addEventListener('click',function(){},false);
btn.addEventListener('click',function(){},false);
移除事件:removeEventListener(事件名,事件函数名,false)
btn.removeEventListener('click',show,false )
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
事件冒泡或事件捕获
事件传递有两种方式:冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将
元素插入到
元素中,用户点击
元素, 哪个元素的 "click" 事件先被触发呢?
-
在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即:
元素的点击事件先触发,然后会触发
元素的点击事件。 -
在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即:
元素的点击事件先触发 ,然后再触发元素的点击事件。
addEventListener(event, function, useCapture);
默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。