滑县网站建设哪家专业,wordpress网站缩,建站工具介绍,wordpress设置首页文章目录 前言
事件基础
事件的三部分#xff1a;
常见的事件#xff1a;
鼠标事件#xff1a;
键盘事件#xff1a;
表单事件#xff1a;
onfocus和onblur#xff1a;获取焦点和失去焦点
onselect#xff1a;选中单行文本框/多行文本框中的内容
onchange#xff…目录 前言
事件基础
事件的三部分
常见的事件
鼠标事件
键盘事件
表单事件
onfocus和onblur获取焦点和失去焦点
onselect选中单行文本框/多行文本框中的内容
onchange具有多个选项的表单元素
编辑事件
oncopy阻止页面内容被复制
onselectstart防止页面内容被选取
oncontextmenu禁用鼠标右键
页面事件
onload页面加载完成之后执行的操作
onbeforeunload离开页面之前触发的操作
事件操作是JS的核心。
事件调用
方式
在Script标签中调用
在元素中调用
总结
事件进阶
给元素添加一个事件的方式
事件处理器
语法
优点
缺点
理解
例子
事件监听器
绑定事件
语法
解析
补充匿名函数
解绑事件
语法
注意
问题
解答
疑惑
解答
event对象
前提
常用的event对象属性
特殊的keyCode - 返回的是布尔值
使用
this
总结
window对象
定义
window对象常用方法
说明
窗口操作
打开窗口
说明
注意
关闭窗口
对话框
alert提示对话框
confirm确认对话框
prompt输入对话框
总结
定时器
setTimeout()和clearTimeout()
两者使用
setInterval()和clearInterval()
特别说明
子对象
location对象
属性
navigator对象
重要属性
返回值
作用
使用
相关字符
BOM元素和DOM元素的关系 document对象
常用的属性
document.referrer
写在最后 前言
这次真的是最后一篇了本篇主讲事件操作顺便补充一点其他内容。
用了上次的行文结构是因为上次就写好了发现太长了所以拆分写了。
但这不是重点重点是内容我又重新梳理了一遍发现了很多华点。 精读一本书胜过看N个视频。 这次看的书是 吴振杰的《Web前端开发精品课 HTML CSS JavaScript基础教程》 17年出版的。 不出意外的话这估计就是压轴文章了~respect
那么咱们开始吧 事件基础
事件的三部分 事件主角是按钮还是div元素 事件类型是鼠标点击还是鼠标移动 事件过程这个事件做了啥发生了啥 常见的事件 鼠标事件 键盘事件 表单事件 编辑事件 页面事件 下面咱们一个一个说。
鼠标事件 onclick鼠标单击事件我们可以为任意元素添加该事件不只是按钮可以触发 onmouseover鼠标移入事件移入这个状态是一下子就执行完成的 onmouseout鼠标移出事件移入和移出都是一样的一下子就执行完的 onmousedown鼠标按下事件是一瞬间的事情 onmouseup鼠标松开事件是一瞬间的事情 onmousemove鼠标移动事件这个最常用移动事件是一个连续的状态 注意在很多时候我们的都是使用单击事件、移动事件的。 键盘事件
键盘事件就两个那就是按下松开。
但是要注意是先有按下才有松开的。 onkeydown键盘按下 onkeyup键盘松开 这两个事件通常用于表单控制动画控制。 表单事件
表单事件顾名思义就是只有在表单组件中才会触发的事件所以很多事件都是跟表单挂钩的。
为了能够更加详细解析下面都是跟表单元素挂钩说明。
onfocus和onblur获取焦点和失去焦点
具有这两个事件的表单元素 只有单选框、复选框、单行文本框、多行文本框、下拉列表 此外超链接也是具备这两个事件的 这么记忆太难了我们怎么判断一个元素具有这两个事件 在浏览器页面按下Tab键能获取焦点的就拥有这两个属性 onselect选中单行文本框/多行文本框中的内容 这个主要是用于单击输入框直接选中所有内容利于用户输入但也不利于修改 onchange具有多个选项的表单元素
触发条件 单选框选择某一项时触发 复选框选择某一项时触发 下拉列表选择某一项时触发 使用场景 复选框中的全选与反选 实现获取全选框元素使用onchange函数监听全选框元素获取该全选框下的所有选择框元素监听选择框元素是否改变如果改变就让选择框中checkedtrue即可。 复习 getElementByName()获取具有同一个name属性值的表单元素 特别注意 选择下拉列表中的某一项时触发的是onchange事件而不是onselect事件 编辑事件
我们在浏览器中查看某些页面的时候会发现是不允许复制的有些甚至是禁止你选择有些呢还不给你使用鼠标右键。
那么这些都是怎么做的呢下面一一为你解答。 oncopy阻止页面内容被复制 document.body.oncopy function() {return false
} 这个时候右键菜单还是存在的甚至还有复制这一项但是不管你怎么点击都是没有成功复制到的。 onselectstart防止页面内容被选取 document.body.onselectstart function() {return false
} 本质上这个还是为了防止用户复制内容的。
也就是说防止用户复制内容有以上两种方式。 oncontextmenu禁用鼠标右键 document.oncontextmenu function() {return false
} 这个其实有bug的因为禁用了右键你依旧可以使用快捷键进行复制操作。
不过你也可以进行键盘按下按钮做逻辑处理禁用快捷键。
比如说禁用Ctrl键后续会提到~ 页面事件
页面事件主要是渲染完之后执行什么操作这些。
但是这些吧很多都被框架给魔改掉了在学习Vue的时候压根没想过要去了解其中的逻辑~ onload页面加载完成之后执行的操作 这个适用于进入到网站之后给你一个提示或者是进行一些校正等操作 与之相对应的是window.onunload但是很少用 onbeforeunload离开页面之前触发的操作 作用就一个那就是替代onunload 事件操作是JS的核心。 事件调用
方式 在script标签中调用 在元素中调用 在Script标签中调用 使用obj.事件名 function () { } 解析obj是DOM对象 注意该方式从本质上来说操作元素的属性只不过这个属性是“事件属性”。 在元素中调用 使用直接在HTML元素中调用事件这个属性又称为是“事件属性”。 总结 在实际开发中我们更倾向于Script标签中调用。 因为行为要和结构分开更具有可读性和可维护性。 下面将进入到事件进阶部分。 事件进阶
经过上面的学习是不是觉得事件很难
下面会更难开始吧。 给元素添加一个事件的方式 事件处理器 事件监听器 事件处理器
事件基础里提到的给元素添加一个事件的方式——通过操作HTML属性的方式进行其实它的专业名称 事件处理器 语法 元素.onclick function () { } 优点 简单、代码可读性强 缺点 事件处理器遵循“后来者居上”原则。 理解 我们无法使用事件处理器的方式给一个元素添加多个相同事件。 也就是说如果我们的操作只能执行一次不能重复执行。 例子 如果我们下五子棋是不可能只下一个的这个点击的动作是需要执行很多次的这个时候使用事件处理器就无法实现我们的需求了。 事件监听器
要实现事件监听我们就得绑定事件。
绑定事件
语法 obj.addEventListener(type, fn, (false)) 解析 obj是DOM对象也就是HTML元素。 addEventListeneradd添加Event事件Listener监听者。 type事件类型是一个字符串。 fn函数名/匿名函数。 false可选参数一般不选下面不提。 为了行文流畅下面同类词语不再进行解析。 补充匿名函数 匿名函数就是没有名字的意思。 或者直接写个函数体function () { }。 解绑事件
既然有绑定事件那就有解绑事件。虽然很少用但还是要学会基本语法的。
语法 obj.removeEventListener(type, fn, (false)) 两者的语法基本一模一样。 注意 实际上removeEventListener()无法解除“事件处理器”添加的事件——也就是对象属性的方法添加的事件它只能解除由addEventListener——即事件监听器添加的事件。 问题 我们怎么解除“事件处理器”添加的事件呢 解答 使用obj.事件名 null即可 疑惑 为什么需要解除事件 解答 为了做高级动画比如说拖拽操作。 下面学一个重要参数。
event对象
前提 当一个事件发生的时候这个事件有关的详细信息会临时保存在一个指定的对象上这个对象就是event对象。 也就是说每一个事件都有一个event对象一般简写成e。 常用的event对象属性 type事件类型 keyCode键码值用来判断你按下了什么键返回值为数字 特殊的keyCode - 返回的是布尔值 shiftKey是否按下shift键 ctrlKey是否按下Ctrl键 altKey是否按下Alt键 复习什么是布尔值数据类型分为几大类都包含哪些数据类型
联动上面“禁用鼠标右键”里面说到的不就来了吗
忘了的回去看看~ 使用 元素.addEventListener(type, (e) { }, (false)) 这里的e就是event对象 禁用Shift键、Ctrl键、Alt键 document.keydown function (e) {if (e.shiftKey || e.ctrlKey || e.altKey) {return null // 你也可以给个提示比如说alert}
} 这里使用的是对象属性的方法也就是事件处理器。 this this是什么 相信这是很多人的疑问。
我也是一头雾水但是我知道这个秘诀 this在监听器函数里。 哪个DOM元素调用了监听器函数this就指向谁。 总结 event和this都是很重要的。 在动画制作里event是常用的。 this嘛多用几遍。 下面补充一点其他知识。
window对象
window对象是啥window有什么作用
定义 在JS中一个浏览器窗口就是一个window对象。 注意浏览器窗口和浏览器的区别。 前者是浏览器里的一部分后者是一个软件。 是对象就有方法。
window对象常用方法 alert()提示框 confirm()确认提示框 prompt()输入对话框 open()打开窗口 close()关闭窗口 setTimeout()开启“一次性”定时器 clearTimeout()关闭“一次性”定时器 setInterval()开始“重复性”定时器 clearInterval()关闭“重复性”定时器 说明 对于window对象来说不管是属性还是方法我们都可以省略window前缀直接使用即可 下面我们展开说说。
窗口操作
窗口操作包含打开窗口关闭窗口。
打开窗口 window.open(url, target) 说明 可以去掉window.直接使用open()也可以。 url表示新窗口的地址允许为空如果是空值即代表打开一个空白窗口在空白窗口我们可以使用document.write()输出内容可以是文本可以是一整个网页。 target表示打开方式跟a标签是类似的有一点不同 open方法的target默认值是_blank而a标签是_self。 注意 如果你打开的是同一个域名下的页面或者空白窗口那你才可以进行一定页面输出的操作。 如果你打开的是别人的网页这些操作都会失效。 我们可以操作open()建立的空白窗口因为window.open()是有返回值的所以我们可以用一个变量存储这个返回值。 这个返回值就是新窗口的window对象。 关闭窗口 window.close() 没有参数 对话框
对话框有三种形式具体有什么用处我们一个一个说明。 alert提示对话框 这个对话框没啥功能一般只用于信息提醒。 confirm确认对话框 这个有确认功能返回值是布尔值。 一般用来询问用户是否执行某操作。 prompt输入对话框 会返回输入的字符串。 总结 我们一般不用这些提供的对话框因为太丑了。 我们一般自定义对话框使用div制作——我很久之前写过可以参考红包模拟。 定时器
定时器的方法有两种一种是只执行一次一种是重复执行的。
setTimeout()和clearTimeout() setTimeout(code, time) code可以是一段代码也可以是一个函数更可以是函数名 time时间单位是毫秒表示要过多久才开始执行code一秒等于1000毫秒 如果code是一个函数名我们可以去掉()直接写函数名即可调用才需要带括号。 egsetTimeout(alert, 1000) 还有其他方法但是为了更好记忆不说。 clearTimeout(timeId) timeId关闭的是哪个定时器 两者使用
let timeId
timeId setTimeout(console.log(11), 1000)
// 清除定时器
clearTimeout(timeId) setInterval()和clearInterval() setInterval(code, time) 大致跟setTimeout是一样的但是code中我们一般都是使用() { }的方式。 clearInterval(timeId) 语法跟上面一模一样用法也是这里省略。 特别说明
重复定时器还有个问题那就是会产生累加问题。
为了解决这个问题我们需要再每次执行setInterval中的函数时先清除之前创建的timeId。 document对象就是window的子对象。 这是为什么呢 子对象
为什么叫做子对象
你可以把这些子对象看成是window对象的属性但是这些window对象的属性也有自己的属性和方法所以我们也可以称为子对象。 document文档对象DOM结构。 下面是BOM结构 location地址对象用于操作URL地址。 navigator浏览器对象用于获取浏览器版本。 history历史对象用于操作浏览历史。 screen屏幕对象用于操作屏幕宽度、高度。 下面拆开说。 location对象
属性 href当前页面地址 search当前页面地址“?”后面的内容查询参数 hash当前页面地址“#”后面的内容锚点定位 这里都是跟后端相关的了不展开说。 navigator对象
重要属性 window.navigator.userAgent 返回值 当前浏览器相关信息 作用 主要用于做兼容性 使用 判断返回的浏览器相关信息这个是字符串是否存在相关字符字符串对象方法——indexOf()。 相关字符 Chrome浏览器信息包含Chrome字符 Firefox浏览器信息包含Firefox字符 这里提到的都是BOM元素下面介绍一下DOM元素。
BOM元素和DOM元素的关系 我们可以认为BOM元素包含DOM元素。 document对象
我们之前经常写 document.body 这里的document就是document对象。 常用的属性 document.title document.body document.forms document.images document.links document.cookie document.URL获取当前文档的地址不能设置 document.referrer返回浏览者通过什么方式到达当前文档的URL 前面两个不说。
中间三个可以用getElementsByTagName来获取没什么意义不说。
单独一个Cookie一般不用因为这需要结合到后端。
URL也不说重点就是只能获取不能设置。 document.referrer 注意这里的字母r是致死量的居多。 作用记录你来到本站的方式——是搜索进来的还是直接输入URL进来的从而用于投放广告优化SEO。 写在最后
终于是写完了进阶的那本书我都看完了我还没更新完。
总之这本书虽然很早发售了但是整体还是蛮好的。
个人能力有限书中很多精彩绝伦是这么用的吗的例子没有写出来如果感兴趣可以去找这本书看看 那么咱们下期再见
至于进阶语法的我看情况写吧。
目前发现HTMLCSS的进阶内容其实很少有可能是现在很多视频教学都把CSS3和CSS2一起教了所以感觉看起来毫不费劲。
但是BFC和IFC这些还是值得关注的下期再见
