3 篇笔记 写笔记

1. #0

   枫泠鸢

   116***[email protected]

   157

   注意,当在 JS 文件中为相关元素设置事件时,其写法与 HTML 事件属性写法相同,例如:

   <button id="test" onclick="changeContent()">更换内容</button>

   在 JS 中则需要这样写:

   var test = document.getElementById("test");
   test.onclick = function changeContent(){
    //......
   }

   注意:在为元素添加事件句柄或者删除元素事件句柄的过程中,不要将 event 参数设置为 onclick,而必须写成 click,去掉事件名称中的 on 即可。

   添加事件句柄函数原型:

   element.addEventListener(event, function, [useCapture])

   删除事件句柄的函数原型:

   element.removeEventListener(event, function, [useCapture])

   枫泠鸢

   116***[email protected]

   8年前 (2018年12月18日)
2. #0

   千年遇玺

   173***[email protected]

   287

   不推荐使用 HTML 元素中可以添加事件属性 的方式来添加属性。

   例子:

   <button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>

   因为遵从"高内聚,低耦合"的编程原则。

   高内聚是说模块内部要高度聚合,低耦合是说模块与模块之间的藕合度要尽量低。前者是说模块内部的关系,后者是说模块与模块间的关系。

   很形象的比拟:严于律己,宽以待人。

   千年遇玺

   173***[email protected]

   7年前 (2019年03月22日)
3. #0

   千年遇玺

   173***[email protected]

   113

   添加事件句柄实例:

   <input id="test" type="button" value="提交"/>
   <script>
   window.onload = function(){
    var test = document.getElementById("test"); 
    test.addEventListener("click",myfun2); 
    test.addEventListener("click",myfun1);
   }
   function myfun1(){ 
    alert("你好1");
   }
   function myfun2(){ 
    alert("你好2");
   }
   </script>

   千年遇玺

   173***[email protected]

   7年前 (2019年03月22日)