zoukankan      html  css  js  c++  java
  • 前端(十五)—— JavaScript事件:绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件

    JS事件:绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件

    一、事件的两种绑定方式

    1、on事件绑定方式

    document.onclick = function() {
        console.log("文档点击");
    }
    // on事件只能绑定一个方法,重复绑定保留最后一次绑定的方法
    // .onclick = function (){}
    
    document.onclick = function() {
        console.log("文档点击");
    }
    // 事件的移除
    document.onclick = null;
    

    2、非on事件绑定方式

    document.addEventListener('click', function() {
         console.log("点击1");
    })
    document.addEventListener('click', function() {
         console.log("点击2");
    })
    // 非on事件可以同时绑定多个方法,被绑定的方法依次被执行
    // addEventListener第三个参数(true|false)决定冒泡的方式
    // addEventListener('事件',fn,冒泡方式)
    
    function fn () {}
    document.addEventListener('click', fn);
    // 事件的移除
    document.removeEventListener('click', fn);
    

    二、事件参数event

    • 存放事件信息的回调参数

    三、事件的冒泡与默认事件

    • 事件的冒泡:父子都具有点击事件,不处理的话,点击子级也会出发父级的点击事件
    • 处理冒泡:(ev是onclick传出来的数据,回调函数获取并处理)
    方法一. ev.cancelBubble = True;
    方法二. ev.stopprppagation()
    
    <body id="body">
       	<div id="sup">
            <div id="sub"></div>
        </div>
    </body>
    
    <script>
    sub.onclick = function (ev) {
        // 方式一:ev.stopPropagation();
        ev.stopPropagation();
    	console.log("sub click");
    }
    sup.onclick = function (ev) {
        // 方式二:ev.cancelBubble = true;
        ev.cancelBubble = true;
    	console.log("sup click");
    }
    
    </script>
    
    • 默认事件:取消默认的事件动作,如鼠标右键会弹出菜单
    • 取消默认事件:
    方法一. return false()
    方法二. ev.preventDefault()
    
    <body id="body">
       	<div id="sup">
            <div id="sub"></div>
        </div>
    </body>
    
    <script>
    sub.oncontextmenu = function (ev) {
        // 方式一:ev.preventDefault();
        ev.preventDefault();
    	console.log("sub menu click");
    }
    sup.oncontextmenu = function (ev) {
    	console.log("sup menu click");
        // 方式二:return false;
        return false;
    }
    
    </script>
    

    四、鼠标事件

    • 鼠标事件
    onclick:鼠标点击
    ondblclick:鼠标双击
    onmousedown:鼠标按下
    onmousemove:鼠标移动
    onmouseup:鼠标抬起
    onmouseover:鼠标悬浮
    onmouseout:鼠标移开
    oncontextmenu:鼠标右键
    
    • 事件参数ev
    ev.clientX:点击点X坐标
    ev.clientY:点击点Y坐标
    
    div.onmousemove = function (ev) {
    		// 鼠标在页面中的位置
    		console.log("x的坐标:", ev.clientX);
    		console.log("y的坐标:", ev.clientY);
    		console.log("移动");
    	}
    

    五、键盘事件

    1. 操作一般标签,键盘事件绑定给document
    2. 表单标签(可以录入文本),键盘事件绑定给表单标签
    
    • 键盘事件
    onkeydown:键盘按下
    onkeyup:键盘抬起
    
    • 事件参数ev
    ev.keyCode:按键编号,键盘上每个按键都有唯一的编号
    ev.altKey:alt特殊按键
    ev.ctrlKey:ctrl特殊按键
    ev.shiftKey:shift特殊按键
    
    // 案例,键盘控制上下左右移动
    var div = document.querySelector('.div');
    	document.onkeydown = function (ev) {
    		// console.log(ev.keyCode);
    		switch(ev.keyCode) {
    			case 37: 
    				console.log("左");
                    // offsetLeft 获取移动钱左端所在位置
    				div.style.left = div.offsetLeft - 3 + "px";
    				break;
    			case 38: 
    				console.log("上");
                    // offsetTop 获取移动钱上端所在位置
    				div.style.top = div.offsetTop - 3 + "px";
    				break;
    			case 39: 
    				console.log("右");
    				div.style.left = div.offsetLeft + 3 + "px";
    				break;
    			case 40: 
    				console.log("下");
    				div.style.top = div.offsetTop + 3 + "px";
    				break;
    		}
    	}
    
    <script type="text/javascript">
        // 平滑的移动
    	var div = document.querySelector('.div');
    
    	// 能否向左|右|上|下运动
    	var l_able = false;
    	var t_able = false;
    	var r_able = false;
    	var b_able = false;
    	setInterval(function () {
    		// l_able为假,则后者短路,可以实现if的简写
    		l_able && (div.style.left = div.offsetLeft - 3 + 'px');  // 左
    		t_able && (div.style.top = div.offsetTop - 3 + 'px');  // 上
    		if (r_able == true) {
    			div.style.left = div.offsetLeft + 3 + 'px';  // 右
    		}
    		b_able && (div.style.top = div.offsetTop + 3 + 'px');  // 下
    
    	}, 16);
    
    	document.onkeydown = function (ev) {
    		switch(ev.keyCode) {
    			case 37: l_able = true; break;
    			case 38: t_able = true; break;
    			case 39: r_able = true; break;
    			case 40: b_able = true; break;
    		}
    	}
    
    	document.onkeyup = function (ev) {
    		console.log(ev);
    		switch(ev.keyCode) {
    			case 37: l_able = false; break;
    			case 38: t_able = false; break;
    			case 39: r_able = false; break;
    			case 40: b_able = false; break;
    		}
    	}
    </script>
    

    六、表单事件

    onfocus:获取焦点
    onblur:失去焦点
    onselect:文本被选中
    oninput:值改变
    onchange:值改变,且需要在失去焦点后才能触发
    onsubmit:表单默认提交事件,form表单专有的事件
    
    	var form = document.querySelector('form');
    	var ipt = document.querySelector('input');
    	var btn = document.querySelector('button');
    	var div = document.querySelector('div');
    
    	ipt.onselect = function () {
    		console.log("文本被选中了");
    	}
    	// 值改变就触发
    	ipt.oninput = function () {
    		console.log("值在改变");
    		div.innerText = this.value;
    	}
    	// 键盘抬起触发
    	ipt.onkeyup = function () {
    		console.log("值在改变");
    		div.innerText = this.value;
    	}
    
    	// 值改变,并且在失去焦点时触发
    	ipt.onchange = function () {
    		console.log("值在改变");
    		div.innerText = this.value;
    	}
    	// form的专有事件
    	form.onsubmit = function () {
    		console.log("提交");
    		return false;   // 取消默认事件
    	}
    

    七、文档事件

    • 文档事件由window调用
    onload:页面加载成功
    onbeforeunload:页面退出或刷新警告,需要设置回调函数返回值,返回值随意
    
    <script type="text/javascript">
    	// 文档加载完毕,触发
    	window.onload = function () {
    		var div = document.querySelector('div');
    		console.log(div);
    	}
    </script>
    
    <script type="text/javascript">
        // 退出页面
    	window.onbeforeunload = function () {
    		return false;
    	}
    </script>
    

    八、图片事件

    onerror:图片加载失败
    

    九、页面事件

    • window来调用
    onscroll:页面滚动
    onresize:页面尺寸调整
    
    window.scrollY:页面下滚距离
    
    <script type="text/javascript">
    	window.onload = function () {
    		window.onscroll = function () {
    			console.log(window.scrollY);
    		}
    </script>
    
  • 相关阅读:
    shell进行mysql统计
    java I/O总结
    Hbase源码分析:Hbase UI中Requests Per Second的具体含义
    ASP.NET Session State Overview
    What is an ISAPI Extension?
    innerxml and outerxml
    postman
    FileZilla文件下载的目录
    how to use webpart container in kentico
    Consider using EXISTS instead of IN
  • 原文地址:https://www.cnblogs.com/linagcheng/p/9810776.html
Copyright © 2011-2022 走看看