事件初探

什么是事件
事件是分为两部分:

  1. **行为本身: **浏览器天生就赋予其的行为 onclick, onmouseover(onmouseenter), onmouseout(onmouseleave), onmousemove, onmousedown, onmouseup, onmousewheel(鼠标滚轮滚动行为), onscroll(滚动条滚动行为), onresize(window.onresize->浏览器窗口的大小改变事件), onload, onunload, onfocus(文本框获取焦点事件), onblur(文本框失去焦点事件), onkeydown/onkeyup(键盘的按下和抬起事件)...
    哪怕没有给上述的行为绑定方法,事件也是存在的,当我们点击这个盒子的时候,同样会触发它的onclick行为,只是什么事请都没有做而已。

  2. 事件绑定: 给元素的某一个行为绑定方法。
    DOM 0级事件绑定

    // -> onclick这个行为是定义在当前元素的私有属性上
    // DOM 0级事件绑定
    var oDiv = document.getElementById('div1');
    oDiv.onclick = function () {
        // -> 当触发oDiv的click行为时,会把绑定的这个函数执行
    };

DOM 2级事件绑定

    // addEventListener这个属性是定义在当前元素的所属EventTarget这个类的原型上
    // DOM 2级事件绑定
    oDiv.addEventListener('click', function () {
        console.log('ok');
    }, false);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,321评论 1 41
  • 事件:分为两部分 1、行为本身:浏览器天生就赋予其的行为:onmouseover(onmouserenter)、o...
    gaoqizhuhui阅读 304评论 0 0
  • 从“集装箱”思考Docker风潮 - 推酷 http://www.tuicool.com/articles/A7R...
    葡萄喃喃呓语阅读 1,257评论 0 2
  • 事件 2.什么是事件? onchange内容发生改变的时候触发 1)鼠标事件MouseEvent 1. oncli...
    web前端ling阅读 602评论 0 0
  • 很奇怪的缘分,我看到了这本书(不会是大哥你觉得我像个疯子,所以送我这本书吧?!)懂事起我就想成为一棵树,因为我知道...
    你说我懂阅读 278评论 1 0