》回顾已知的事件绑定

标签中的绑定

<a onclick="run()">点我</a>

js中的绑定

dom对象.onclick = 匿函

jquery中的绑定

点击事件，如何绑定，三种方式尝试一下

on绑定

可以让新生成的标签对象，获得事件的绑定

代码解读

为tbody委托一个点击事件

如果有点击发生

让tbody下面的具有 delete类的标签对象，执行函数中的功能

关注this是什么

this就是一群装备了delete的标签中被点击的那个标签

这个标签是dom标签对象

委托方式绑定事件的格式

父标签对象.on（事件名称，子标签对象，匿函）父标签对象接到委托，当子标签对象发什某某事件时，执行匿名函数的内容
格式中的’子标签对象‘可以通过css选择器的方式来明确注，父和子标签都可以通过选择器来明确定位
on方法中的参数一和参数二，都是str类型

阻止默认行为

return false

超链接的阻止

表单提交的阻止

》 a标签的阻拦

<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script></head>
<body><a href="http://www.baidu.com/" onclick="return func()">点我，我就跳转</a> <br>
<a href="http://www.baidu.com/" onclick="return false" >点我，我就跳转</a> <br>
<a href="http://www.baidu.com/" onclick="false" >我是无法阻挡的a标签，我会跳转</a><script>function func() {alert('1111');return false}
</script>
</body>
</html>

》表单提交的阻拦

<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script></head>
<body><form action="" >用户名: <input type="text" name="uname"><input type="submit" value="提交"></form><script>// 表单的submit按钮，本质上是触发表单对象的submit事件// 阻止表单提交，只需要让事件内的函数返回false就可以实现$("form").submit(function () {// 验证提交的内容是否为空// 拿到控件var $txt = $(":text");// 拿数据var content = $txt.val();// 判断是否为空if(content.length === 0) {console.log('用户输入为0');return false}})
</script>
</body>
</html>

常用的事件

click
hover
blur
focus
change
keyup
kewdown

》事件的使用格式

对象.事件名（匿函）

》注，事件的匿函如果给一个形参，那么这个形参就是事件对象

事件对象具有它的属性和方法

试验一下键盘按下事件（给body标签添加一个keydown的事件绑定，试一试事件对象的KeyCode属性）

测试代码

<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script>$(function () {//给body标签添加kewdown事件var $bd = $("body");$bd.keydown(function (event) {var code = event.keyCode;document.title = code;})})</script>
</head>
<body></body>
</html>

随堂演练代码

<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script></head>
<body><ul><li>1</li><li>2</li><li>3</li>
</ul><input type="button" value="新增li"><!--效果一，点击button-->
<!--效果二，点击li，li标签文字变颜色--><script>// 拿到button对象，绑定一个点击事件var $btn = $("input")function add_li(){$li = $("<li>");$li.text("aaa");$("ul").append($li);}$btn.click(add_li)function turn_red(){$(this).css("color","red");}// 给li添加点击事件// 当li被点击时，颜色变红// $("li").click(turn_red)$("ul").on("click","li",turn_red);</script></body>
</html>

jquery-事件绑定相关推荐

JQuery事件绑定，bind与on区别
jquery事件绑定 bind:向匹配元素添加一个或多个事件处理器 $(selector).bind("click",data,function); live:向当前或未来的匹配元 ...
JQuery-学习笔记06【高级——JQuery事件绑定和切换】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
jquery事件绑定和解除绑定bind、unbind、one
全栈工程师开发手册 (作者:栾鹏) jquery系列教程4-事件操作全解 jquery事件绑定使用函数bind(type [,data],fn)绑定事件,one函数也可以进行一次绑定,但是需要注意b ...
day05【JQuery框架】HTML引入Jquery、jQuery与JS区别、基本选择器、层级关系选择器、属性选择器、过滤选择器、对象遍历、Jquery的DOM操作【重点】、Jquery事件绑定
回顾 1. bom对象window对象三种弹框alert()confirm()prompt()二种定时器一次性:setTimout() --- 通过递归实现循环性循环性:setInterval()lo ...
HTML中详述jQuery事件绑定方式
jQuery事件绑定方式 1.bind()方法: bind(type,[data],fn):为每个匹配元素的特定事件绑定对应的事件处理函数,各参数含义如下: type表示事件类型,多个事件类型使用空格 ...
jQuery事件绑定on()、bind()与delegate() 方法详解
啃了一段日子的js相关了,学的过程中发现在jQuery中绑定事件时,有人用bind(),有人用on(),有人用delegate(),还有人用live(),看代码的时候觉得都实现功能了也就掀过去了,只是 ...
jQuery 事件绑定方法（bind hover toggle live.... ）、删除事件方法（unbind, die）及事件对象
事件绑定方法: 1.<type>(function) $("button").click(function(){... }); 2.bind(map) $(" ...
1、jquery事件绑定和委托的实现
jQuery的事件绑定和委托可以使用 on().one().bind().live().delegate()等方法实现. 1.on() : 语法:$(selector).on(event,child ...
jquery事件绑定解绑机制源码分析
引子为什么Jquery能实现不传回调函数也能解绑事件?如下: $("p").on("click",function(){alert("The par ...
wpf checkbox选中触发事件_Web前端开发(16)——JQuery事件绑定与插件
事件绑定 jquery标准的绑定方式 jq对象.事件方法(回调函数); 比如给name绑定点击事件: $("#name").click(function () { alert(&q ...

jquery-事件绑定

on绑定

阻止默认行为

常用的事件

随堂演练代码

jquery-事件绑定相关推荐

最新文章

热门文章