zoukankan      html  css  js  c++  java
  • js事件

    事件绑定

    事件绑定方法I:绑定元素属性

    事件绑定方法II:绑定对象属性

    事件绑定方法III:使用addEventListener() 方法(DOM2级事件程序)

    addEventListener

    语法:target.addEventListener(type,listener,useCapture);

    接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。

    ·type: 字符串,事件名称,不含“on”,比如“click”、 “mouseover”、“keydown”等。

    ·listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 ·

    useCapture :是否使用捕获,一般用 false 。

    removeEventListener

    语法:target.removeEventListener(type,listener,useCapture); 写的参数和addEventListener()函数的相同。

    实现删除addEventListener()函数添加的事件处理。

    IE事件处理程序

    IE8及以下浏览器不支持addEventListener, IE8及以下版本浏览器实现了与DOM中类似的两个方法:attachEvent()和detachEvent()。 这两个方法都需要两个参数:事件名称和事件处理函数。

    IE11只支持addEventListener! IE9,IE10对attachEvent和addEventListener都支持! IE8及以下版本只支持attachEvent!

    事件流

    事件流描述的是从页面中接受事件的顺序。 IE和Netscape开发团队提出了两个截然相反的事件流概念。IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流。 事件冒泡 IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接受, 然后逐级向上传播到较为不具体的节点。

    eg:点击按钮,那么 这个click事件会 按照这样传播:

    <input>→<div>→<body>→<html>→document

    事件源

    概念:发生事件的DOM节点(HTML元素)。 不管在哪个事件中,只要你操作的那个元素就是事件源。
    获取方式: ie:window.event.srcElement 标准下:event.target

    事件委托

    事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。 (利用冒泡的原理,把事件加到父级上,触发执行效果。)
    好处:提高性能。
    Eg: oUl.onmouseover = function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; //(W3C||IE) if(target.nodeName.toLowerCase() == 'li'){ target.style.background = "red"; } };

    阻止默认事件

    有一些html元素默认的行为,比如说a标签,点击后有跳转动作;form表单中的submit类型的input有一个默认提交跳转事件;reset类型的input有重置表单行为。
    阻止方式:
    1.return false; (HTML、DOM0级)
    2. event.preventDefault(); (W3C)
    3.event.returnValue = false;(IE)
    兼容写法: if (event.preventDefault) { event.preventDefault(); }else{ event.returnValue = false; }

    阻止冒泡事件

    不再派发事件 event.stopPropagation();//标准浏览器
    event.cancelBubble = true; // IE浏览器
    兼容写法: if (event.stopPropagation) { event.stopPropagation(); }else{ event.cancelBubble = true; }
  • 相关阅读:
    Pascal's Triangle 2(leetcode java)
    118. Pascal's Triangle (java)
    Bulb Switcher (leetcode java)
    Lowest Common Ancestor of a Binary Search Tree(Java 递归与非递归)
    Remove Duplicate Letters(Java 递归与非递归)
    读大道至简有感
    自学Java第一周的总结
    jmeter----jpgc----ultimate thread group
    jmeter----jpgc----stepping thread group
    jmter--jpgc模块
  • 原文地址:https://www.cnblogs.com/weiyz/p/7152742.html
Copyright © 2011-2022 走看看