原生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;

    }

  •