事件与方法的区别和方法有什么区别

来源：蜘蛛抓取(WebSpider) 时间：2017-05-21 19:41 标签： 委托和事件的区别
jQuery 教程
jQuery 事件
jQuery 是为事件处理特别设计的。
什么是事件？
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
在元素上移动鼠标。
选取单选按钮
在事件中经常使用术语"触发"（或"激发"）例如：
"当您按下按键时触发 keypress 事件"。
常见 DOM 事件：
文档/窗口事件
mouseenter
mouseleave
jQuery 事件方法语法
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件：
$(&p&).click();
下一步是定义什么时间触发事件。您可以通过一个事件函数实现：
$(&p&).click(function(){
常用的 jQuery 事件方法
$(document).ready()
$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在
章节中已经提到过。
click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
在下面的实例中，当点击事件在某个 &p& 元素上触发时，隐藏当前的 &p& 元素：
$(&p&).click(function(){
$(this).hide();
dblclick()
当双击元素时，会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：
$(&p&).dblclick(function(){
$(this).hide();
mouseenter()
当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：
$(&#p1&).mouseenter(function(){
alert('您的鼠标移到了 id=&p1& 的元素上!');
mouseleave()
当鼠标指针离开元素时，会发生 mouseleave 事件。
mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：
$(&#p1&).mouseleave(function(){
alert(&再见，您的鼠标离开了该段落。&);
mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：
$(&#p1&).mousedown(function(){
alert(&鼠标在该段落上按下！&);
当在元素上松开鼠标按钮时，会发生 mouseup 事件。
mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：
$(&#p1&).mouseup(function(){
alert(&鼠标在段落上松开。&);
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
$(&#p1&).hover(
function(){
alert(&你进入了 p1!&);
function(){
alert(&拜拜! 现在你离开了 p1!&);
当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：
$(&input&).focus(function(){
$(this).css(&background-color&,&#cccccc&);
当元素失去焦点时，发生 blur 事件。
blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：
$(&input&).blur(function(){
$(this).css(&background-color&,&#ffffff&);
反馈内容（*必填）
截图标记颜色
联系方式(邮箱)
联系邮箱：
投稿页面：
记住登录状态
重复输入密码JavaScript三种绑定事件方式及相互之间的区别分析
作者：CharlesMan
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了JavaScript三种绑定事件方式及相互之间的区别,结合具体实例形式分析了javascript事件绑定方式的基本实现方法与相互之间的区别,需要的朋友可以参考下
本文实例讲述了JavaScript三种绑定事件方式及相互之间的区别。分享给大家供大家参考，具体如下：
JavaScript三种绑定事件的方式：
&div id="btn" onclick="clickone()"&&/div& //直接在DOM里绑定事件
function clickone(){ alert("hello"); }
&div id="btn"&&/div&
document.getElementById("btn").onclick = function（）{ alert("hello"); } //脚本里面绑定
&div id="btn"&&/div&
document.getElementById("btn").addeventlistener("click",clickone,false); //通过侦听事件处理相应的函数
function clickone(){ alert("hello"); }
那么问题来了，1 和 2 的方式是我们经常用到的，那么既然已经有两种绑定事件的方法为什么还要有第三种呢？答案是这样的：
用 "addeventlistener" 可以绑定多次同一个事件，且都会执行，而在DOM结构如果绑定两个 "onclick" 事件，只会执行第一个；在脚本通过匿名函数的方式绑定的只会执行最后一个事件。
&div id="btn" onclick="clickone()" onclick="clicktwo()"&&/div&
function clickone(){ alert("hello"); } //执行这个
function clicktwo(){ alert("world!"); }
&div id="btn"&&/div&
document.getElementById("btn").onclick = function（）{ alert("hello"); }
document.getElementById("btn").onclick = function（）{ alert("world"); } //执行这个
&div id="btn"&&/div&
document.getElementById("btn").addeventlistener("click",clickone,false);
function clickone(){ alert("hello"); } //先执行
document.getElementById("btn").addeventlistener("click",clicktwo,false);
function clicktwo(){ alert("world"); } //后执行
以上；可根据场景灵活选择。
PS:关于javascript常用事件及相关说明还可参考本站在线工具：
javascript事件与功能说明大全：
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具求解释一下JQ中两种事件绑定方式的区别
$(document).on(&click&,&a[data-role='ajax-tab']&,function(){
alert(&test&);
$(&a[data-role='ajax-tab']&).on(&click&,function(){
alert(&test&);
click事件会由子元素冒泡到父元素，document对象是冒泡终点，有的浏览器会冒泡到window对象，所以点击一个元素，会在元素本身及其每个外层元素上各触发一次click事件
1、第一种方式click事件函数绑定在document上，a元素触发click时，事件冒泡到document才被捕获，document捕获到click事件时检查事件的目标（即最开始触发click事件的元素，event.target）是不是符合选择器（on方法的第二个参数），若符合则调用函数（on方法第三个参数）。这种机制称为事件委托
2、第二种方式是第一种的特例，省略了第二个参数（选择器），所有冒泡到a元素上的click事件被捕捉到时，都会触发函数调用，相当于直接为a元素绑定了click事件

我要回帖

更多关于 委托和事件的区别 的文章

 

随机推荐