美文网首页
事件绑定方式、阻止默认事件和冒泡事件的方式

事件绑定方式、阻止默认事件和冒泡事件的方式

作者: darkTi | 来源:发表于2019-03-18 17:00 被阅读0次

    一、事件绑定方式

    1、 在dom元素中直接绑定,语法为 onXXX="执行函数"

    • onXXX 为事件名称,鼠标单击事件 onclick ,鼠标双击事件 ondouble,鼠标移入事件 onmouseover,鼠标移出事件 onmouseout 等
      例如:<button onclick="fn()">点我</button>

    2、 在JavaScript代码中绑定
    element.onxxx = function(){}
    addEventListener()事件监听器

    • element.addEventListener(eventName,fn,useCapture)

    eventName为事件名称,不加onfn为执行函数;useCapture是Boolean类型,不添加或使用false时为冒泡事件;使用true时为捕获事件;

    3、 $().on(events,selector,data,fn),selector为绑定事件的元素
    例如:$('ul').on('click','li',function(){}),这里ul必须是页面中已经存在的元素

    二、阻止默认事件和冒泡事件的方式

    A:return false
    在事件的处理中,可以阻止默认事件和冒泡事件。
    B:event.preventDefault()
    在事件的处理中,可以阻止默认事件但是允许冒泡事件的发生。
    C:event.stopPropagation().。
    在事件的处理中,可以阻止冒泡但是允许默认事件的发生。

    相关文章

      网友评论

          本文标题:事件绑定方式、阻止默认事件和冒泡事件的方式

          本文链接:https://www.haomeiwen.com/subject/opkluqtx.html