Python-JS中的事件详解
目录
fdf!!
fefd
一、JS中的事件二、JS中的事件分类:
1.事件初级:
2.事件参数 Event
3.鼠标事件
4.键盘事件 ***
5.表单事件 ***
6.文档事件 *
7.图片事件 *
8.页面事件 ***** 三、事件的绑定与取消 三、事件对象: 四、事件的冒泡与默认事件 ***** 一、JS中的事件
什么是事件: 页面标签在满足某种条件下可以完成指定功能的这种过程,称之为事件 某种条件: 如鼠标点击标签: 单击事件 | 鼠标双击标签: 双击事件 | 鼠标悬浮标签: 悬浮事件 | 键盘按下: 键盘按下事件 指定功能: 开发者根据实际需求完成相应的功能实现 钩子函数: 就是满足某种条件被系统回调的函数(完成指定功能) 点击事件: 明确激活钩子的条件= 激活钩子后该处理什么逻辑指定完成功能 事件使用简单案例: var div = document.querySelector(".div"); // 找到的是第一个.div
div.onclick = function () {
// alert(123)
this.style.backgroundColor = "pink";
} // 明确第一个及第二个
var divs = document.querySelectorAll('.div');
divs[1].ondblclick = function () {
divs[0].style.backgroundColor = "yellow";
}
事件使用案例:(事件控制标题栏) 首先对网页做架构: <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js事件控制标题栏</title>
<style>
.part1 div {
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
float: left;
cursor: pointer;
}
.part1 {
overflow: hidden;
}
h2 {
height: 30px; }
</style>
</head>
<body>
<div class="part1">
<div class="b1">标题栏</div>
<div class="b2">标题栏</div>
<div class="b3">标题栏</div>
<div class="b4">标题栏</div>
</div>
<h2></h2>
</body> </html>
第一种方式:使用事件一步一步实现 <script>
var b1 = document.querySelector('.b1');
// 鼠标悬浮事件
b1.onmouseenter = function () {
console.log("鼠标悬浮上了");
// 悬浮上后,该标签的字体颜色变化橘色
this.style.color = "#FF6700";
}
// 需求并非为鼠标移走,去除颜色
b1.onmouseleave = function () {
this.style.color = "#000";
}
</script>
第二种方式:
使用循环绑定的方式进行多个标题的控制 在这里使用var和let进行循环绑定时的区别:
var是没有块级作用域的概念的,也就是说在这里使用var进行循环绑定,i 的值在循环外边也是可以访问的,在循环的时候就会不断被修改,在本题中,i 的值最终会被修改为4. 使用let的时候let具有块级作用域的概念,在每次循环都是会产局部作用域的,在局部作用域中产生的变量,在外部不能被访问的,所以使用了let之后,每次循环 i 的值都是新的,这就简单解决了变量污染的问题 在这里还要注意在JS中函数的定义和调用不是严格遵守先定义后调用的原则的, 它交给浏览器解析的时候会有一个编译过程,会将文档中产生的所有名称存放起来,所以在函数定义的上边进行函数的调用也是没有问题的,在编译过程结束之后才会执行函数里边的代码体 <script>
// 制作数据
var data = ["标题1", "标题2", "标题3", "标题4"]; var divs = document.querySelectorAll('.part1 div');
console.log(divs); // 循环绑定 => 会出现变量(i)污染(在这里使用局部作用域解决)
for (let i = 0; i < divs.length; i++) {
divs[i].onmouseenter = function () {
// 打印自身索引值
console.log(i);
// 将自身颜色变为橘色,其他兄弟颜色变为黑色
// 就是i为橘色, 非i为黑色
changeColor(i); // 悬浮内容
changeContent(i)
}
}
// console.log(i); // 自定义的修改颜色的方法
function changeColor(index) {
for (let i = 0; i < divs.length; i++) {
// 先不管三七二十一,全改成黑色
divs[i].style.color = "black";
// 如果是目标选中标签,它的颜色再重新设置为橘色
if (i == index) {
divs[i].style.color = "#FF6700";
}
}
} var h2 = document.querySelector('h2');
// 修改内容
function changeContent(index) {
h2.innerText = data[index];
} </script>
二、JS中的事件分类:
1.事件初级:
onload：页面加载完毕事件，只附属于window对象 onclick：鼠标点击事件 ondblclick: 鼠标双击事件 onmouseenter|鼠标悬浮 (常用) onmouseleaver|鼠标移开(常用) onmouseover：鼠标悬浮事件 onmouseout：鼠标移开事件 onfocus：表单元素获取焦点 onblur：表单元素失去焦点 2.事件参数 Event
存放时间信息的回调参数
3.鼠标事件
onclick：鼠标点击
ondblclick：鼠标双击
onmousedown：鼠标按下
onmousemove：鼠标移动
onmouseup：鼠标抬起
onmouseover：鼠标悬浮
onmouseout：鼠标移开
oncontextmenu：鼠标右键
鼠标的事件参数: ev.clientX : 鼠标点击点X坐标
ev.clientY : 鼠标点击点 4.键盘事件 ***
键盘事件 onkeydown：键盘按下
onkeyup： 键盘抬起 事件参数ev ev.keyCode：按键编号
ev.altKey：alt特殊按键
ev.ctrlKey：ctrl特殊按键
ev.shiftKey：shift特殊按键 5.表单事件 ***
onfocus：获取焦点
onblur：失去焦点
onselect：文本被选中
oninput：值改变
onchange：值改变，且需要在失去焦点后才能触发
onsubmit：表单默认提交事件
6.文档事件 *
文档事件由window调用 onload：页面加载成功
onbeforeunload：页面退出或刷新警告，需要设置回调函数返回值，返回值随意
7.图片事件 *
onerror：图片加载失败
8.页面事件 *****
onscroll：页面滚动
onresize：页面尺寸调整
window.scrollY：页面下滚距离
三、事件的绑定与取消
一、事件的两种绑定方式 1、on事件绑定方式与移除
on事件只能绑定一个方法，重复绑定保留最后一次绑定的方法 document.onclick = function() {
console.log("文档点击");
}
// on事件只能绑定一个方法，重复绑定保留最后一次绑定的方法
document.onclick = function() {
console.log("文档点击");
}
// 事件的移除
document.onclick = null;
2、非on事件绑定方式与移除 该绑定方式可以为一个元素绑定多个事件, 按照绑定顺序依次执行
addEventListener第三个参数(true|false)决定冒泡的方式
document.addEventListener('click', function() {
console.log("点击1");
})
document.addEventListener('click', function() {
console.log("点击2");
})
// 非on事件可以同时绑定多个方法，被绑定的方法依次被执行
// addEventListener第三个参数(true|false)决定冒泡的方式
function fn () {}
document.addEventListener('click', fn);
// 事件的移除
document.removeEventListener('click', fn);
三、事件对象:
什么是事件对象: 事件的钩子函数, 系统回调时传递了一个值, 该值为事件对象 该函数对象中几乎包含了该对象支持的所用样式的事件设置,例如:特殊按键,鼠标点击点等等 在这里引入一个万物皆为假的说法,(就是在js中事件的设置默认都是为false的,例如默认cancleBubble(取消冒泡)=false的) // 系统回调事件函数时, 传递了一个 事件(event) 实参
// 如果要使用传递来的实参 事件(event), 定义接收的 形参 即可
box.onclick = function(ev){
// 使用事件对象
// 特殊按键 eg: ev.altKey: true | false
// 鼠标触发点: ev.clientX | ev.clientY // 取消冒泡
ev.cancelBubber = true; // 取消默认事件
return false;
}
四、事件的冒泡与默认事件 *****
事件的冒泡：父子都具有点击事件，不处理的话，点击子级父级也会发出相应的点击事件
解释: 子级响应时间后, 会将事件传递给父级, 如果父级有相同事件, 也会被激活, 最终船体给document 取消冒泡,当自身处理事件后, 该事件就处理完毕 , 不会再向父级传递 取消冒泡的方式: <body id="body">
<div id="sup">
<div id="sub"></div>
</div>
</body>
<script>
sub.onclick = function (ev) {
// 方式一
ev.stopPropagation();
console.log("sub click");
}
sup.onclick = function (ev) {
// 方式二
ev.cancelBubble = true;
console.log("sup click");
}
body.onclick = function (ev) {
console.log("body click");
}
</script>
默认事件：取消默认的事件动作，如鼠标右键菜单 取消默认事件时可以将返回值设置为false,当系统看到函数返回值为false的时候,就不会自动执行默认事件动作了 取消默认的事件动作方式: <body id="body">
<div id="sup">
<div id="sub"></div>
</div>
</body>
<script>
sub.oncontextmenu = function (ev) {
// 方式一
ev.preventDefault();
console.log("sub menu click");
}
sup.oncontextmenu = function (ev) {
console.log("sup menu click");
// 方式二
return false;
}
body.oncontextmenu = function (ev) {
console.log("body menu click");
}
</script>
---------------------
原文：https://blog.csdn.net/Onion_cy/article/details/85129608
Python-JS中的事件详解的更多相关文章
- iOS中—触摸事件详解及使用
iOS中--触摸事件详解及使用 (一)初识 要想学好触摸事件,这第一部分的基础理论是必须要学会的,希望大家可以耐心看完. 1.基本概念: 触摸事件 是iOS事件中的一种事件类型,在iOS中按照事件划分 ...
- JS中this关键字详解
本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 阅读此文章,还需要心平气和的阅读完,相信一定会有所收获,我也会不定期的发布,分享一些文章,共同学习 首先,必须搞清楚在JS里面,函数 ...
- JS 中 this 关键字详解
本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 首先,必须搞清楚在JS里面,函数的几种调用方式: 普通函数调用 作为方法来调用 作为构造函数来调用 使用apply/call方法来调 ...
- Bom和Dom编程以及js中prototype的详解
一.Bom编程: 1.事件练习: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- JavaScript面向对象(一)——JS OOP基础与JS 中This指向详解
前 言 JRedu 学过程序语言的都知道,我们的程序语言进化是从"面向机器".到"面向过程".再到"面向对象"一步步的发展而来.类似于 ...
- JS中navigator对象详解
<code class="language-html"><!doctype html> <html> <head> <meta ...
- js中Date()对象详解
var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-???? ...
- js中的逻辑运算符详解(||、&&、!)
视频地址:https://www.bilibili.com/video/BV1Y7411K7zz?p=1 一直以来都没弄清楚js中的逻辑运算符是怎么回事 , 一直都以为他们的用法和java一样 , 今 ...
- node.js中express-session配置项详解
官方地址:https://www.npmjs.com/package/express-session 作用:用指定的参数创建一个session中间件,sesison数据不是保存在cookie中,仅仅s ...
随机推荐
- XMind 入门教程
选自:http://www.xmindchina.net/ XMind 是一款非常实用的商业思维导图软件,应用全球最先进的Eclipse RCP 软件架构,全力打造易用.高效的可视化思维软件.对于新手 ...
- python---ORM之SQLAlchemy（5）联合唯一的使用
# coding:utf8 # __author: Administrator # date: // # /usr/bin/env python import sqlalchemy from sqla ...
- 在 chrome 上导出 pdf
用html+css写出网页,然后在chrome上导出pdf 1. command + p:快捷呼出打印: 2. “目标打印机”:选择“更改”,之后选择“另存为PDF”: 3. 点“更多设置”,可以勾选 ...
- javascript 拖拽事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Spark记录-SparkSQL一些操作
scala>val spark=new org.apache.spark.sql.SQLContext(sc) user.json {"age":"45" ...
- node.js 笔记
教程总结笔记: 学习网站:http://www.runoob.com/nodejs/nodejs-install-setup.html Node.js 中文网及安装文件下载: http://nodej ...
- Tomcat中配置URIEncoding="UTF-8"来处理中文的方法
http://www.cnblogs.com/seabird1979/p/4837237.htmlTomcat中配置URIEncoding="UTF-8"来处理中文的处理打开 se ...
- luogu 4158 粉刷匠 dp套dp
dp套dp 每个木板是个递推的dp,外部是个分组背包 #include<bits/stdc++.h> #define rep(i,x,y) for(register int i=x;i&l ...
- DropEditText
https://blog.csdn.net/jdsjlzx/article/details/46860563 https://github.com/qibin0506/DropEditText ...
- 20165230田坤烨《网络对抗》Exp1 PC平台逆向破解
实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getShe ...