JavaScript-DOM（3）
事件处理
事件类型
<body>
<!--方式1：直接带html代码中嵌入js代码-->
<button onclick="console.log('事件1')">按钮1</button>
<!--方式2：在html代码中直接给事件处理赋予一个函数调用语句-->
<!--this:在当前指向的是当前标签-->
<button onclick="func(this)">按钮2</button>
<!--方式3：DOM 0 级事件-->
<button id="b3">按钮3</button>
<button id="b4">按钮4</button>
<!--方式4：DOM2级事件处理-->
<!--主流方式-->
<script type="text/javascript">
/*
this在标签当作实参时 指该标签
在js的函数处理中， 指的是window
在DOM0级事件处理函数中，指的是当前执行事件的标签
在DOM2级事件处理函数中，指的也是当前执行事件的标签
*/
// 方式2
function func (obj) {
console.log('事件2');
console.log(obj);
console.log(this);
}
// 方式3：添加onclick属性
var b3 = document.getElementById('b3');
// 添加事件属性及赋值
b3.onclick = fun3;
function fun3 () {
console.log('事件3');
console.log(this);
}
// 方式4：添加事件监听
// addEventListener('事件的执行方式', 执行内容)
var b4 = document.getElementById("b4");
b4.addEventListener('click', function(){
console.log('事件4');
console.log(this);
}, false);
b4.addEventListener('click', fun5)
function fun5(){
console.log('事件5');
}
// 移除事件监听
b4.removeEventListener('click', fun5);
/*
移除事件
方式1：不能移除
方式2：不能移除
方式3： onclick=null
方式4：removeEventListener()*/
</script>
</body>
焦点事件
// 焦点事件一般用于输入框
var input1 = document.getElementById("i1");
// 获取焦点
input1.addEventListener('focus',func1);
function func1(){
i1.placeholder = '请输入账号';
}
input1.addEventListener('blur', func2);
function func2(){
i1.removeAttribute('placeholder');
}
单击双击事件
<button id="b1">单击</button>
<button id="b2">双击</button>
<script type="text/javascript">
var b1 = document.getElementById("b1");
var b2 = document.getElementById("b2");
b1.addEventListener('click',func1);
function func1 () {
alert('heihei');
}
//双击
b2.addEventListener('dblclick', func2);
function func2 () {
alert('papa');
}
// b2.onclick = func2;
// b2.ondblclick = func2;
</script>
鼠标事件
<script type="text/javascript">
// 鼠标事件
// mouseover mouseup mousedown mouseout
// mouseleave mouseenter
var d1 = document.getElementById("d1");
d1.addEventListener('mousedown',func1);
d1.addEventListener('mouseup', func2);
function func1(){
console.log('鼠标在div范围内按下了');
}
function func2 () {
console.log('鼠标在div范围内被抬起了')
}
d1.addEventListener('mouseover',func3);
d1.addEventListener('mouseout', func4);
function func3(){
console.log('鼠标在div范围内');
}
function func4 () {
console.log('鼠标在div范围外')
}
//d1.addEventListener('mousemove', func5);
function func5(){
console.log('鼠标在div中移动');
}
d1.addEventListener('mouseenter', fun6)
d1.addEventListener('mouseleave', fun7)
function fun6 () {
console.log('鼠标进入了');
}
function fun7 (){
console.log('鼠标离开了');
}
</script>
键盘事件
<script type="text/javascript">
// 键盘事件一般直接添加到文档上
// keydown 任意按键
// keyup 任意按键
// keypress 除alt shift control numLock capsLock f1-f12 方向键
document.body.addEventListener('keydown', function(e){
console.log('键盘按下了');
var ev = e || window.event;
console.log(ev);
// 获取按键编码
console.log(ev.keyCode);
// shift
console.log(ev.shiftKey);
// alt
console.log(ev.altKey);
// ctrl
console.log(ev.ctrlKey);
})
document.body.addEventListener('keyup', function(){
console.log('键盘抬起了');
})
document.body.addEventListener('keypress', function(){
console.log('keypress');
})
</script>
event事件
鼠标事件的event对象
event事件
<button id="b1">按钮</button>
<script type="text/javascript">
var b1 = document.getElementById("b1");
// 添加点击事件
// 每种事件的执行都自带一个事件对象 事件对象包含该事件的所有信息
b1.onclick = function(e){
// 浏览器适配
var ev = e || window.event;
// 获取当前浏览器可视窗口的坐标
console.log(ev.clientX, ev.clientY);
// 获取当前页面的坐标
console.log(ev.pageX, ev.pageY); // 比较常用
// 获取当前电脑屏幕的坐标
console.log(ev.screenX, ev.screenY);
}
b1.addEventListener('dblclick', function(e){
var ev = e || window.event;
console.log(ev);
})
组合键盘
<!--control + A-->
<script type="text/javascript">
document.addEventListener('keydown', func)
function func(e){
var ev = e || window.event;
if (ev.keyCode == 65 && ev.ctrlKey){
randomColor(document.body);
}
}
</script>
事件的冒泡与捕获
事件流的概念
事件流
<div id="d1">
<div id="d2">
<div id="d3"></div>
</div>
</div>
<script type="text/javascript">
d1 = document.getElementById("d1");
d2 = document.getElementById("d2");
d3 = document.getElementById("d3");
// 事件冒泡 ： d3-d2-d1
// 事件捕获 ： d1-d2-d3
// 默认为事件冒泡状态
// 当第三个参数为true 为事件捕获
d1.addEventListener('click', func, false);
d2.addEventListener('click', func, false);
d3.addEventListener('click', func, false);
function func (e) {
console.log(this.id); // d3 d2 d1 冒泡阶段 由内到外
this.style.backgroundColor = 'orange';
}
</script>
阻止事件冒泡或默认事件
事件的常用属性
<!--如果父标签不设置高度，默认父标签的高度为零，如果该标签
有子标签，子标签有高度设置，那么父标签的高度与子标签的高度一致
父标签被子标签撑开了-->
<body style="height: 1000px">
<div id="d1" style="background: red;width: 200px;height: 200px;"></div>
<input type="text" id="i1" />
<a href="http://www.baidu.com" id="a1">非法网站</a>
<script type="text/javascript">
// 给body添加点击事件，更改body的颜色为green
document.body.onclick = func;
// 给div添加点击事件，更改div的颜色为green
var d1 = document.getElementById("d1")
d1.onclick = func;
function func(e){
var ev = e || window.event
this.style.backgroundColor = 'green';
// 阻止冒泡行为
ev.stopPropagation();
}
var i1 = document.getElementById("i1");
i1.onclick = function(e){
var ev = e || window.event;
ev.stopPropagation()
}
var a1 = document.getElementById("a1");
a1.onclick = function(e){
var ev = e || window.event;
ev.stopPropagation();
// 非法网站：提示是否继续访问
var result = confirm('您确定继续访问非法页面？')
if(result == false){
// 终止默认事件
ev.preventDefault();
}
}
</script>
</body>
拖拽
<script type="text/javascript">
// page 或 client 都能做
var div1 = document.getElementById('div1');
div1.onmousedown = function(e) {
var ev = e || window.event
var disX = ev.pageX - div1.offsetLeft;
var disY = ev.pageY - div1.offsetTop;
//var disX = ev.clientX - parseInt(getComputedStyle(div1, null).left);
//var disY = ev.clientY - parseInt(getComputedStyle(div1, null).top);
document.body.onmousemove = function(e) {
var ev = e || window.event
div1.style.left = ev.pageX - disX + 'px';
div1.style.top = ev.pageY - disY + 'px';
}
document.body.onmouseup = function() {
document.body.onmousemove = null;
document.body.onmouseup = null;
}
}
</script>
JavaScript-DOM（3）的更多相关文章
- 8.6 JavaScript之HTML的DOM（三）
8.5 HTML和JavaScript的DOM(三) 一.DOM 是Document Object Model( 文档对象模型 )的缩写. DOM把所有的html都转换为节点 .整个文档 是一个节点 ...
- 深入理解JavaScript系列（1）：编写高质量JavaScript代码的基本要点
深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 2011-12-28 23:00 by 汤姆大叔, 139489 阅读, 119 评论, 收藏, 编辑 才华横溢的 ...
- javaScript事件（二）事件处理程序
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...
- javaScript事件（四）event的公共成员（属性和方法）
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 以上内容见javaS ...
- javaScript事件（三）事件对象
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 1.认识事件对象 事 ...
- DOM（二）使用DOM
在了解DOM(文本对象模型)的框架和节点后,最重要的是使用这些节点处理html网页 对于一个DOM节点node,都有一系列的属性和方法可以使用.常用的有下表. 完善:http://www.w3scho ...
- 第18天 ajax技术和javascript加强（json）
第18天 ajax技术和javascript加强(json) 复习: B/S架构实现文件上传的思路? 使用a标签实现文件下载功能,有什么问题? 使用Servlet实现文件下载的思路? 今日任务 ...
- javaScript事件（六）事件类型之滚轮事件
滚轮事件其实就是一个mousewheel事件,这个事件跟踪鼠标滚轮,类似Mac的触屏版. 一.客户区坐标位置 鼠标事件都是在浏览器视口的特定位置上发生的.这个位置信息保存在事件对象的clientX和c ...
- javaScript事件（九）事件类型之触摸与手势事件
一.触摸事件 touchstart:当手指触摸屏幕时触发:即使已经有一个手指放在了屏幕上也会触发. touchmove:当手指在屏幕上滑动时连续地触发.在这个世界发生期间,调用preventDefau ...
- javaScript事件（八）事件类型之变动事件
DOM2级的变动(mutation)事件能在DOM中某一部分发送变化时给出提示.变动事件为XML或HTML DOM设计的,并不特定于某种语言.DOM2级定义了如下变动事件. DOMSubtreeMod ...
随机推荐
- Angel - 模拟Kafka数据流调试FTRL的方法
Angel - 模拟Kafka数据流调试FTRL的方法 Mac或者Linux版本(Win10的Linux子系统同样适用) 创建一个目录用来安装kafka以及zookeeper等相关软件,比如,新建一个 ...
- 初识NLTK
需要用处理英文文本,于是用到python中nltk这个包 f = open(r"D:\Postgraduate\Python\Python爬取美国商标局专利\s_exp.txt") ...
- SecureCRT操作指令
连接服务器,文件——连接SFTP会话,然后可以help查看命令 传输文件需要明确并处在客户端和服务器端两个正确路径下, 服务器端的操作: cd——去服务器指定的路径 pwd——查看服务器端当前目录 l ...
- C#Web从0到1—创建一个web并从VS集成的SQLlocalDB数据库中查询数据
软件说明: VS2017,腾讯云服务器10元1个月,系统Win2012 R2标准版 第一步:建立第一个网页 建立工程 建好后,可以打开View选项打开项目资源浏览器和工具箱,后文会多次用到这两个版面 ...
- Python爬虫实例（四）网站模拟登陆
一.获取一个有登录信息的Cookie模拟登陆 下面以人人网为例,首先使用自己的账号和密码在浏览器登录,然后通过抓包拿到cookie,再将cookie放到请求之中发送请求即可,具体代码如下: # -*- ...
- 记录常用的adb命令
1.启动adb服务 adb start-server 2.关闭服务 adb kill-server 3.进入shell环境 adb shell 4.安装应用 adb install -r xxx.ap ...
- Django配置相关及其它
配置 模板 TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ os.pat ...
- vue中富文本编辑框
.npm install vue-quill-editor --save .npm install quill --save .封装成子组件 <template> <quill-ed ...
- PHP多维数组转一维
目录 1. array_column函数 2. array_walk函数 3. array_map函数 4. foreach循环 5. array_map变种 参考:https://www.awaim ...
- java中加与不加public
加public表示全局类,该类可以import到任何类内.不加public默认为保留类,只能被同一个包内的其他类引用来源:https://blog.csdn.net/qq_15037231/artic ...