js 事件的使用情况、超链接执行js代码

末蓝、 2021-07-24 15:02 306阅读 0赞

**事件的搭配**
    	onchange="操作"
    		当搭配输入文本框时，改变数据只有当焦点失去时才触发，不合适
    		搭配下拉框，随着选项的改变而触发，合适
    	onload="操作"
    		搭配body
    	单双击
    		搭配按钮
    	鼠标事件
    		用户进行鼠标移动操作的
    	键盘操作
    		用户会进行键盘操作的html元素
    		
    		
    **事件的冲突**
    	事件的触发包含相同部分的时候
    		单双击事件
    		只会触发单击，不能触发双击，因为双击前会一直触发单机
    		<input type="button" name="" id="" value="敲我！快！" onclick="t2()" ondblclick="t3()"/>
    		
    		
    **事件的阻断**
    当事件的返回值是false时发生，不是事件内的函数返回false
    如onclick="return false" 将阻断html标签的整个功能
    	加了事件阻断了原本正常的功能
    		如超链接失效
    			function t4()
    		{
    			alert("事件的阻断");
    			return false;
    		}
    		<a href="http://www.baidu.com" target="_blank" onclick="return t4()">百度</a>
    		触发事件后不会跳转超链接
    	应用：
    		表单事件，当有一个不对时，表单返回事件返回false，阻止表单的提交
    		
    		
    **超链接调用事件函数**
    	<a href="javascript:js代码">超链接名称</a>
    		如<a href="javascript:t5()">调用js函数</a>

代码示例：

<html>
    	<head>
    		<title>js 事件机制2事件的合适使用</title>
    		<meta charset="utf-8"/>
    		<script  type="text/javascript">
    			function t1()
    			{ 
    				alert("改变1");
    			}
    			
    			function t2()
    			{ 
    				alert("单击");
    			}
    			function t3()
    			{ 
    				alert("双击");
    			}
    			function t4()
    			{ 
    				alert("事件的阻断");
    				return false;
    			}
    			function t5()
    			{ 
    				alert("超链接调用");
    			}
    		</script>
    	</head>
    	<body>
    		<h3>js 事件机制2</h3>
    		<hr />
    		值改变事件:<input type="text" name="" id="" value="" onchange="t1()" />
    		<br />
    		<select name="" id="" onchange="t1()">
    			<option value="">北京</option>
    			<option value="">上海</option>
    			<option value="">广州</option>
    		</select>
    		<hr />
    		事件的冲突:<br />
    			<input type="button" name="" id="" value="敲我！快！" onclick="t2()" ondblclick="t3()"/>
    		事件的阻断:<br />
    		<a href="http://www.baidu.com" target="_blank" onclick="return t4()">百度</a>
    		超链接调用js函数:
    		<a href="javascript:t5()">调用js函数</a>
    	</body>
    </html>