jQuery events related operations

jQuery events related operations

Binding events

1. .bind()

• You can bind multiple events at the same time as the elements
• The first parameter is: Event name,
• The second parameter is: Event handler - anonymous functions

Bind an event .bind ( "event name", "handler") bind multiple events .bind ({ "event name": "handler", "event name": "handler", "event name" : "handler"})

//绑定单个事件
 $("#btn").bind("click",function () {
	alert("我被点了");
});

 //bind()方法可以为元素同时绑定多个事件
$("#btn").bind({"click":function(){
	alert("我被点了");
},"mouseover":function(){
	$(this).css("backgroundColor","red");
},"mouseout":function(){
	$(this).css("backgroundColor","");
}});
复制代码

2. .delegate()

• Element Parameters 1. To bind events --- p
• 2. The name of the parameter to bind events --- click
• 3. handler parameter binding events --- anonymous function

//给div标签里面的p标签添加事件
$("#dv").delegate("p","click",function () {
	alert("我被点了");
})
复制代码

3. on()

• Two parameters
  • 1 Name of the event
  • 2 event handler
• Three parameters
  • 1, the name of the event
  • --P 2. element to bind events
  • 3 event handlers

Parent element .on ( "Event Type", "child element", the event handler);

$("#btn").on("click",function () {
	//创建p添加到div中
	$("#dv").append($("<p>这是一个p</p>"));
	
	//为div中的p标签绑定事件
	$("#dv").on("click","p",function () {
		alert("我被点了");
	});
});
复制代码

Note: == In practical applications, commonly used on general, bind and not delegate used ==

Unbundling event

1. Binding and unbinding events

   • bind() unbind()
   • deledae () undelegate ()
   • on() off()

2. parameter

   • Name (event name) for unbundling of events
   • (Elements, event name) released the kind of binding events for that element

3. Example:

$("#dv").unbind("click");
$("#dv").undelegate("click");
$("#dv").off("click");
复制代码

4. Father and son relationship element event unbundling

//下面的代码是把子级元素的点击事件解绑了,父级元素的点击事件还存在
$("#dv").off("click","**");
//移除父级元素和子级元素的所有的事件
$("#dv").off();
复制代码

note:

Parent element and child elements are binding events through the normal way, through off if unbundling of> time, event solution parent elements tied, event sub-level elements no unbundling

但是:如果子级元素是通过父级元素调用delegate的方式绑定的事件,父>级元素使用off方式解绑事件,这个时候父级元素和子级元素的相同的事>件都会被解绑
复制代码

trigger event

1. Direct call to trigger element method
2. Use: trigget (event name)
3. Use: triggerHandler (event name)

 $(function () {
	$("#btn1").click(function () {
		$(this).css("backgroundColor","red");
	});
	
	//点击第二个按钮-触发第一个按钮的点击事件
	$("#btn2").click(function () {
	
		//触发事件--3三种方式
		$("#btn1").click();
		
		$("#btn1").trigger("click");//触发事件
		
		$("#btn1").triggerHandler("click");//触发事件
	});
});
复制代码

Note: trigger () and triggerHandler () difference

trigger () will trigger the default behavior of the browser, and executes the event triggrtHandler () does not trigger the browser's default behavior, but will execute events such as: the focus is to get the default behavior of the browser

$("#txt").trigger("focus");		//文本框获取到焦点了
$("#txt").triggerHandler("focus");	//文本框没有获取到焦点了
复制代码

Event Object

$("div").on("click",function(event){} )

• event.delegateTarget: Code binding object events
• event.currentTarget: object binding events
• event.target: real objects to trigger events

Cancel bubbling event the default event

Cancel bubbling event

1. event.stoPropagation()
2. return false

Cancel the default event

1. event.preventDefault()
2. return false;

For example, you can cancel the default event for $ a label ( "a"). PreventDefault ()

Reproduced in: https: //juejin.im/post/5cf20bc5e51d4577596486a9