一、览表

方法	描述
bind()	向匹配元素附加一个或更多事件处理器
$(selector).bind(event,data,function)	被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
blur()	触发、或将函数绑定到指定元素的 blur 事件
$(selector).blur(function)	当元素失去焦点时发生 blur 事件。
change()	触发、或将函数绑定到指定元素的 change 事件
$(selector).change(function)	当元素的值发生改变时，会发生 change 事件。
click()	触发、或将函数绑定到指定元素的 click 事件
$(selector).click(function)	当点击元素时，会发生 click 事件
dblclick()	触发、或将函数绑定到指定元素的 double click 事件
$(selector).dblclick(function)	当双击元素时，会发生 dblclick 事件。
delegate()	向匹配元素的当前或未来的子元素附加一个或多个事件处理器
$(selector).delegate(childSelector,event,data,function)	delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
die()	移除所有通过 live() 函数添加的事件处理程序。
$(selector).die(event,function)	die() 方法移除所有通过 live() 方法向指定元素添加的一个或多个事件处理程序。
error()	触发、或将函数绑定到指定元素的 error 事件
$(selector).error(function)	当元素遇到错误（没有正确载入）时，发生 error 事件。 (多用于图片加载未成功出现文字)
event.isDefaultPrevented()	返回 event 对象上是否调用了 event.preventDefault()。
event.isDefaultPrevented()	sDefaultPrevented() 方法返回指定的 event 对象上是否调用了 preventDefault() 方法。
event.pageX	相对于文档左边缘的鼠标位置。
event.pageX	pageX() 属性是鼠标指针的位置，相对于文档的左边缘。
event.pageY	相对于文档上边缘的鼠标位置。
event.pageY	pageY() 属性是鼠标指针的位置，相对于文档的上边缘。
event.preventDefault()	阻止事件的默认动作。
event.preventDefault()	preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）
event.result	包含由被指定事件触发的事件处理器返回的最后一个值。
event.result	result 属性包含由被指定事件触发的事件处理器返回的最后一个值，除非这个值未定义。
event.target	触发该事件的 DOM 元素。
event.target	target 属性规定哪个 DOM 元素触发了该事件。可以用来查询时哪个元素触发了
event.timeStamp	该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.type	描述事件的类型。
event.type	type 属性描述触发哪种事件类型。
event.which	指示按了哪个键或按钮。
focus()	触发、或将函数绑定到指定元素的 focus 事件
	当元素获得焦点时，发生 focus 事件。
keydown()	触发、或将函数绑定到指定元素的 key down 事件
$(selector).keydown(function)	当按钮被按下时，发生 keydown 事件。
keypress()	触发、或将函数绑定到指定元素的 key press 事件
$(selector).keypress()	keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。keypress() 方法触发 keypress 事件，或规定当发生 keypress 事件时运行的函数。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。
keyup()	触发、或将函数绑定到指定元素的 key up 事件
$(selector).keyup(function)	当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
live()	为当前或未来的匹配元素添加一个或多个事件处理器
$(selector).live(event,data,function)	live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。
load()	触发、或将函数绑定到指定元素的 load 事件
$(selector).load(function)	当指定的元素（及子元素）已加载时，会发生 load() 事件。该事件适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架）。
mousedown()	触发、或将函数绑定到指定元素的 mouse down 事件
$(selector).mousedown()	当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。
mouseenter()	触发、或将函数绑定到指定元素的 mouse enter 事件
$(selector).mouseenter(function)	只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。该事件大多数时候会与 mouseleave 事件一起使用。
mouseleave()	触发、或将函数绑定到指定元素的 mouse leave 事件
$(selector).mouseleave()	只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
mousemove()	触发、或将函数绑定到指定元素的 mouse move 事件
$(selector).mousemove(function)	当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件
mouseout()	触发、或将函数绑定到指定元素的 mouse out 事件
$(selector).mouseout()	不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
mouseover()	触发、或将函数绑定到指定元素的 mouse over 事件
$(selector).mouseover(function)	当鼠标指针位于元素上方时，会发生 mouseover 事件。不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用。
mouseup()	触发、或将函数绑定到指定元素的 mouse up 事件
$(selector).mouseup()	当在元素上放松鼠标按钮时，会发生 mouseup 事件。与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。 mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数。
one()	向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
$(selector).one(event,data,function)	one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。当使用 one() 方法时，每个元素只能运行一次事件处理器函数。
ready()	文档就绪事件（当 HTML 文档就绪可用时）
$(document).ready(function) $().ready(function) $(function)	当 DOM（文档对象模型）已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。 ready() 函数仅能用于当前文档，因此无需选择器。提示：ready() 函数不应与一起使用。
resize()	触发、或将函数绑定到指定元素的 resize 事件
$(selector).resize(function)	当调整浏览器窗口的大小时，发生 resize 事件。
scroll()	触发、或将函数绑定到指定元素的 scroll 事件
$(selector).scroll(function)	当用户滚动指定的元素时，会发生 scroll 事件。
select()	触发、或将函数绑定到指定元素的 select 事件
$(selector).select(function)	当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
submit()	触发、或将函数绑定到指定元素的 submit 事件
$(selector).submit(function)	当提交表单时，会发生 submit 事件。该事件只适用于表单元素。
toggle()	绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。
$(selector).toggle(function1(),function2(),functionN(),…)	toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。该方法也可用于切换被选元素的 hide() 与 show() 方法
$(selector).toggle(speed,callback)	切换 Hide() 和 Show() 检查每个元素是否可见。如果元素已隐藏，则运行 show()。如果元素可见，则元素 hide()。这样就可以创造切换效果。
trigger()	所有匹配元素的指定事件
$(selector).trigger(event,[param1,param2,…])	trigger() 方法触发被选元素的指定事件类型。
triggerHandler()	第一个被匹配元素的指定事件
$(selector).triggerHandler(event,[param1,param2,…])	triggerHandler() 方法触发被选元素的指定事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡。请注意，与 trigger() 方法不同，triggerHandler() 方法不会引起所发生事件的默认行为（文本不会被选中）。
unbind()	从匹配元素移除一个被添加的事件处理器
$(selector).unbind(event,function)	unbind() 方法移除被选元素的事件处理程序。该方法能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行。
undelegate()	从匹配元素移除一个被添加的事件处理器，现在或将来
$(selector).undelegate(selector,event,function)	undelegate() 方法删除由 delegate() 方法添加的一个或多个事件处理程序。
unload()	触发、或将函数绑定到指定元素的 unload 事件
event.unload(function)	当用户离开页面时，会发生 unload 事件。具体来说，当发生以下情况时，会发出 unload 事件： - 点击某个离开页面的链接 - 在地址栏中键入了新的 URL - 使用前进或后退按钮 - 关闭浏览器 - 重新加载页面

unload() 方法将事件处理程序绑定到 unload 事件。
unload() 方法只应用于 window 对象。 |

二、分类

1-事件

1.1　鼠标事件

.click()	单击
.dblclick()	双击
.mouseenter()	鼠标进入某个元素时触发
.mouseleave()	鼠标离开某个元素时触发
.mouseover()	鼠标移入某个元素时触发
.mouseout()	鼠标移出某个元素时触发
.mousedown()	鼠标按下时触发
.mousemove()	鼠标被移动时触发
.mouseup()	鼠标抬起时触发

1.2　键盘事件

.keydown()	键盘的键按下时触发
.keypress()	按住键盘键时触发
.keyup()	键盘的键放开时触发

1.3　表单事件

.select()	文本被选中时触发
.submit()	提交按钮时触发
.blur()	失去焦点时触发
.change()	内容改变时触发
.focus()	获得焦点时触发

1.4　框架/对象事件

$(document).read()	在文档加载后激活函数
$(window).resize()	浏览器窗口大小改变时触发
.scroll()	文档滚动时触发
.load()	元素加载完时触发
.unload()	用户退出页面时触发

1.5 　其他事件需要用事件处理器添加

click 点击

<body>
    <div id="app">hello world</div>
    <script>
        $("#app").click(function(){
            $(this).html("change")
        })
    </script>
</body>

foucs 获取焦点

<body>
    <input type="text" id="app">
    <script>
        $("#app").focus(function(){
            $(this).css({backgroundColor:"red",width:"100px"})
        })
    </script>
</body>

blur 遗失焦点

$("#app").blur(function(){
            $(this).css({backgroundColor:"yellow",width:"100px"})
        })

2-事件处理器

2-1为指定的子元素添加事件,删除事件

$(selector).delegate(“childSelector”,”event”（空格分隔多个事件）,data(可选),function)

$(selector).delegate(“childSelector”,”event”（空格分隔多个事件）,function) 删除由delegate绑定的事件处理器

 <div>
          <p>531</p>
          <button>2132</button>
      </div>
    <script>
        $("div").delegate("button","click",function(){
            $("p").slideToggle();//slideToggle()在显示隐藏互相切换,自带动画
            console.log($("p"));
        })
    </script>
//全部清除
$("body").undelegate();

2-2元素事件处理器，移除事件处理器

$(selector).bind(event（空格分隔多个事件）,data(可选),function) 绑定事件 $(selector).bind({event:function,event:function, … })

$(selector).unbind(event（空格分隔多个事件）,function) 移除事件

$(selector).live(event（空格分隔多个事件）,data(可选),function) 适用于匹配选择器的当前或者未来的元素

$(selector).die(event（空格分隔多个事件）,function)移除通过live()方法向元素添加的一个或多个事件处理

JQuery19把.die()换成了.off() .live()换成.on()

 <body>
        <div>
            <p id="p1">531</p>
            <p id="p2">123</p>
            <button id="button1">2132</button>
            <button id="button2">21d2</button>
        </div>
      <script>
          //给p元素添加事件
          $("#p1").on("click",function(){
              $(this).toggle();
          });
          $("#p2").bind("click",function(){
              $(this).toggle();
          });
           //点击button
          $("#button1").click(function(){
              $("#p1,p2").off();
              //里面不写东西代表全部移出,只移除了绑定on的元素事件
          });
          $("#button2").click(function(){
              $("p1,p2").unbind();
              //里面不写东西代表全部移出，选中元素事件全部移除
          });
      </script>
  </body>

2-3触发被选定元素的指定事件

$(selector).tigger(event,param1,param2…) 规定被选元素要触发的事件

$(selector).tigger(eventObj) 规定使用事件对象的被选元素要触发的事件

$(selector).tiggerHandler(event,[param1,param2,…]) 只影响第一个匹配元素,不会执行浏览器默认动作，也不会产生事件冒泡,返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。此外，如果没有处理程序被触发，则这个方法返回 undefined。

 $("p").click(function(){
            $("p").after("sxsfaf")
          })
 $("button").click(function(){
            $("p") .trigger("click")
            })

  $("p").click(function(){
            $("p").after("sxsfaf")
          }
          )
var e=jQuery.Event("click")
$("button").click(function(){
            $("p") .trigger("e")
            })

2-4单次事件

$(selector).one(event,data,function)

3.其他事件

3-1 错误事件

.on( “error”, handler )

要将所有丢失的图像替换为另一个，可以更新src传递给.error()。
确保替换图像存在；否则error事件将无限期触发。
$( "img" )
  .on("error",function() {
    $( this ).attr( "src", "replacement.png" );
  })
  .attr( "src", "missing.png" );
  //.attr( 属性名称)获取匹配元素集中第一个元素的属性值。
  除了一些属性（例如 value 和 tabindex）之外，属性值都是字符串。
  //.attr( 属性名称, 值 )为元素设置一个属性
  //.attr( {"属性名"："属性值"，"属性名"："属性值"} )为元素设置多个属性

<img src="errrr.gif" alt="">
<script>
          $("img").on("error",function(){
              $("img").replaceWith("<p>sdaads</p>");//replaceWith()html替换
          });
</script>

3-2 阻止默认事件及其判断

event.preventDafault()

event.isDefaultPrevented()//阻止为true

//阻止连接的默认跳转事件
<a href="https://www.w3school.com.cn/jquery/event_mouseover.asp">aa</a>
<script>
          $("a").click(function(event){
              event.preventDefault();
          })
</script>

3-3 toggle事件

$(selector).toggle(function1(),function2(),functionN()….)//JQuery19已经移除影响被选元素的轮流click事件

$(selector).toggle(speed,callback)//spend规定hide/show效果的速度括号后不写参数默认为调用hide/show

毫秒（比如 1500）
“slow”
“normal”
“fast”

$(selector).toggle(boolean)//是否应只显示或只隐藏所有被选元

4.获取

4-1 获取触发事件的DOM元素

event.target

4-2 获取事件的类型

event.type

4-3 获取按钮的keycode

event.which

4-4 获取相对于文档的鼠标位置

event.pageX 相对于document左侧的鼠标位置

event.pageY 相对于document上侧的鼠标位置

 <div>
       <span></span>
</div>
      <script>
          $(document).mousemove(function(e){
              $("span").text("x:"+e.pageX+",y:"+e.pageY)
          })
      </script>

4-5 获取最后一次点击事件返回的结果

event.result

 $("button").click(function(e){
            return console.log("x:"+e.pageX+",y:"+e.pageY);  
          })
 $("button").click(function(e){
            e.result
          })

事件

一、览表

二、分类

1-事件

1.1 鼠标事件

1.2 键盘事件

1.3 表单事件

1.4 框架/对象事件

1.5 其他事件需要用事件处理器添加

2-事件处理器

2-1为指定的子元素添加事件,删除事件

2-2元素事件处理器，移除事件处理器

2-3触发被选定元素的指定事件

2-4单次事件

3.其他事件

3-1 错误事件

3-2 阻止默认事件及其判断

3-3 toggle事件

4.获取

4-1 获取触发事件的DOM元素

4-2 获取事件的类型

4-3 获取按钮的keycode

4-4 获取相对于文档的鼠标位置

4-5 获取最后一次点击事件返回的结果

1.1　鼠标事件

1.2　键盘事件

1.3　表单事件

1.4　框架/对象事件

1.5 　其他事件需要用事件处理器添加