DOM绑定事件的三种方式

旧城等待， 2022-05-25 14:11 292阅读 0赞

参考事件绑定原理

  1. 在DOM中绑定。

在DOM中绑定有两种方式:

  • 直接在html中onXxxx = “jsCode”
  • 在html中onXxx = “handleName()”，然后在js文件中定义
  1. function handleName() {jsCode}
  3. <button οnclick="alert('111')" type='button'></button>
  4.  <button οnclick="myClick()"></button>

  1. 在js中绑定。

    elementObj.onXxx = function(){}

    elementObj.οnclick=function() {

    1.  alert('111')

    }

  1. 利用事件监听，但是事件监听要考虑到浏览器兼容性

Chrome、FireFox、Opera、Safari、IE9.0及其以上版本

elementObj.addEleventListener(type, handele, useCapture) // useCapture是事件流，是否捕获

在IE8以及其以下版本中用

elementObj.attachEvent(type, handle)

  1. function addEvent(obj, type, handle) {
  2.         try {
  3.             obj.addEventListener(type, handle, false);
  4.         } catch(e) {
  5.             try {
  6.                 obj.attach('on' + type, handle);
  7.             } catch(e) {
  8.                 obj['on' + type] = handle;
  9.             }
  10.         } 
  11.     }

发表评论

表情：
评论列表 （有 0 条评论，292人围观）

还没有评论，来说两句吧...

相关阅读

    相关 jQuery绑定事件的四种方式

    jQuery提供了多种绑定事件的方式，每种方式各有其特点，明白了它们之间的异同点，有助于我们在写代码的时候进行正确的选择，从而写出优雅而容易维护的代码。下面我们来看下jQuer

    以你之姓@以你之姓@/ 0 赞/ 289 阅读