JavaScript基础-事件的绑定方式

事件属性

• 优点：几乎所有的浏览器都支持
• 缺点：夹杂在HTML代码中，代码不简洁；这种事件写法效率不高；不符合“行为，样式，结构”相分离

        HTML :

<div onclick="myClick()"></div>

        CSS:

div {
    width: 100px;
    height: 100px;
    background-color: rgb(178, 203, 250);
}

        JS :

<script>
    function myClick() {
        alert('事件属性')
    }
</script>

绑定事件

• 优点：符合“行为，样式，结构”相分离；便于操作当事对象；方便读取事件对象
• 缺点：一个元素只能注册一个事件，如果绑定了两个事件，后者会覆盖前者

        HTML:

<div></div>

        JS:

<script>
    var divEle = document.querySelector('div')
    divEle.onclick = function () {
        alert('绑定事件')
    }
</script>

 事件监听

• addEventListener : 非 IE 7、8 下使用 

        语法：元素.addEventListener（'事件类型','事件处理函数','useCapture'）

        useCapture：冒泡或者捕获；值为false时为冒泡，值为true时为捕获，默认值为false

        如果同一事件源绑定了2个监听事件，两个处理函数都会执行，且按照你注册的顺序执行

        JS:

<script>
    var divEle = document.querySelector('div')
    divEle.addEventListener('click', function () {
        alert('事件监听一')
    })
    divEle.addEventListener('click', function () {
        alert('事件监听二')
    })
</script>

•  attachEvent ：IE 7、8 下使用

         语法：元素.attachEvent （'事件类型','事件处理函数'）

        如果同一事件源绑定了2个监听事件，两个处理函数都会执行，且按照你注册的顺序倒序执行

<script>
    var divEle = document.querySelector('div')
    divEle.attachEvent('onclick', function () {
        alert('事件监听一')
    })
    divEle.attachEvent('onclick', function () {
        alert('事件监听二')
    })
</script>