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

一、事件绑定方式

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().。
在事件的处理中,可以阻止冒泡但是允许默认事件的发生。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容