原生js事件笔记

原生js事件笔记

​ 要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称

1.事件绑定

​ 原生js常用的三种绑定事件的方法：

• 1.在DOM元素中直接绑定；

  • 标签行内直接绑定事件

  • onXXX="JavaScript Code"

  • <div onclick="console.log(1)"></div>
    <div onclick="fn()"></div>
    <script>
    function fn() {
        console.log(1);
    }
    </script>
    

• 2.在JavaScript代码中绑定；

  JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。

  • 选择DOM对象绑定事件

  • <input id="demo" type="button" value="点击" />
    <script type="text/javascript">
    document.getElementById("demo").onclick=function(){
    alert(this.getAttribute("type"));
      
    }
    </script>
    

• 3.绑定事件监听函数；

  • addEventListener()

    • addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。所以，这种绑定事件的方法必须要处理浏览器兼容问题。

    • elementObject.addEventListener(eventName,handle,useCapture);

    • <input id="demo" type="button" value="点击" />
      <script type="text/javascript">
      document.getElementById("demo").addEventListener("click",function(){console.log("1"),false});
        //这里的事件名称没有on。
      
      }
      </script>
      

  • attachEvent()

    • elementObject.attachEvent(eventName,handle);

    • <input id="demo" type="button" value="点击" />
      <script type="text/javascript">
      document.getElementById("demo").attachEvent("onclick",function(){console.log("1")});
        //这里的事件名称有on。
      }
      </script>
      

• 4.兼容写法

  • <div id="div"></div>
    <script>
        function addEvent(obj, event, fn) {
            try {//主流浏览器
                obj.addEventListener(event, fn, false);
            } catch (e) {
                try {//IE8及以下
                    obj.attachEvent(event, fn);
                } catch (e) {//早期浏览器
                    obj["on" + event] = fn;
                }
            }
        }
      
        var div = document.getElementById("div");
        addEvent(div,"click",fn);
        function fn() {
            console.log("123");
        }
    </script>
    

2.事件冒泡和默认行为的阻止

• 1.事件冒泡的阻止

  • e.stopPropagation W3C

  • e.cancleBubble IE

  • <script>
        document.getElementById("dv1").onclick = function (e) {
            console.log(1);
        };
        document.getElementById("dv2").onclick = function (e) {
            e = e || window.event;
            console.log(2);
          //兼容写法
            e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
        }
    </script>
    

• 2.默认行为的阻止

  • e.preventDefault

  • e.returnValue

  • return false

  • document.getElementById("a").onclick = function (e) {
        e = e || window.event;
        console.log("1");
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
        // 或return false;
    }