JavaScript中常用事件示例展示附源码

可以查看JavaScript方法使用---JavaScript基础数据类型、运算符、数组、函数的定义及DOM方式应用

将现有元素移动到指定位置

javascript 复制代码

//实现将外部元素id=span1的<span>元素移动到id=div1的<div>中
function fun1(){
    //通过document对象调用方法，根据id属性值，获取div1和span1所在的标签对象
    let div1 = document.getElementById('div1');
    let span1 = document.getElementById('span1');
    //通过父标签对象div1调用方法，将子标签span1追加到指定父标签下
    div1.appendChild(span1);

}

将现有元素全部移动到指定位置

javascript 复制代码

//实现将外部多个span元素移动到id=div2的<div>中
function fun2(){
    //通过document对象调用方法，获取span数组--根据标签对象名获取
    let spans = document.getElementsByTagName('span');

    let div2 = document.getElementById('div2');
    //遍历标签对象数组，获取每一个span对象
    for (let i=0;i<spans.length;i++){
        div2.appendChild(spans[0]);

    }
}

注意：通过数组名 $i$ ,获取span标签对象，通过div2对象调用方法追加div2.appendChild(spans $i$ );追加操作，会导致追加次数是数组中元素个数-1，导致当前面的数据被移除后，后面数据会自动向前补位；

解决办法：每次获取数组中第一个位置上元素，此时for循环中的i表示循环的次数，而不是下标

新建元素并放到指定位置

javascript 复制代码

//新建元素span4，添加到id=div3的<div>块中
function fun3(){
    //通过document对象，调用方法，创建指定名称的标签
    let span = document.createElement('span');
    //通过指定标签对象，调用属性，设置标签中存储的文本内容，
    // 方式1-标签对象名.innerText='值'； -- 只能设置纯文本内容
    // 方式2-标签对象名.innerHTML='值'； -- 即支持纯文本内容，也支持存储HTML标签，实际开发常用
    span.innerHTML = 'span4';
    let div3 = document.getElementById('div3');
    div3.appendChild(span);
}

下拉列表移动选中项和移动全部

如图，实现上图中的歌名的选择，可以进行喜爱项的单选或多选，也可以全部选择，这个是实现的html代码，下面用JavaScript来实现选中移动效果

HTML代码：

html 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>刘思鉴的歌</title>
	<script type="text/javascript"  src="js/select.js" ></script>
</head>
<body>
	<table border="1">
		<caption>刘思鉴的歌</caption>
		<tr>
			<td>
				<select id="select1" style="width:100px;height:300px" size="10" multiple="multiple">
					<option value="玄奘">玄奘</option>
					<option value="读自">读自</option>
					<option value="星河水手">星河水手</option>
					<option value="中产小孩">中产小孩</option>
					<option value="锚">锚</option>
					<option value="抗体">抗体</option>
					<option value="胧">胧</option>
					<option value="耻辱柱">耻辱柱</option>
					<option value="鲸落">鲸落</option>
					<option value="肩崖">肩崖</option>
				</select>
			</td>
			<td align="center">
			<!-- 这里通过JavaScript函数点击事件进行实现，传递两个参数，分别是左右两个选框 -->
				<input type="button" onclick="moveSelected('select1','select2')" value="-->"/><br/>
				<input type="button" onclick="moveAll('select1','select2')" value="==>"/><br/>
				<input type="button" onclick="moveSelected('select2','select1')" value="<--"/><br/>
				<input type="button" onclick="moveAll('select2','select1')" value="<=="/>
			</td>
			<td>
				<select id="select2" style="width:100px;height:300px" size="10" multiple="multiple"></select>
			</td>
		</tr>
	</table>
</body>
</html>

JavaScript代码：

javascript 复制代码

//移动src中所有被选中的选项到dest中
function moveSelected(src,dest){
    //根据参数获取源下拉列表和目标下拉列表
    let srcSel = document.getElementById(src);
    let destSel = document.getElementById(dest);
    //获取源下拉列表中的所有option选项
    let options = srcSel.getElementsByTagName('option');
    //遍历所有的选项，获取每一个选项对象
    for (let i=0;i<options.length;i++){
        //通过每一个option对象调用selected属性，判断是否被选中
        if (options[i].selected){
            //通过目标下拉列表对象，调用方法，将被选中的选项移动
            destSel.appendChild(options[i]);
            //将追加后的元素位置销毁，避免元素移动错误
            i--;
        }
    }
}
function moveAll(src,dest){
//根据参数获取源下拉列表和目标下拉列表
    let srcSel = document.getElementById(src);
    let destSel = document.getElementById(dest);
    //获取源下拉列表中的所有option选项
    let options = srcSel.getElementsByTagName('option');
    //遍历所有的选项，移动每一个选项对象
    while (options.length>0){
            destSel.appendChild(options[0]);
    }
}

多选框实现反选、全选、全不选

如下图，实现歌曲的选中，可以选中部分或是反选，也可以进行全选和全不选

还是通过JavaScript鼠标点击事件来完成，HTML实现代码如下：

html 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>checkbox</title>
	<script type="text/javascript"  src="js/checkBox.js" ></script>
</head>
<body>
	请选择隔壁老樊的歌:<br/>
	<!-- this 关键字表示当前事件绑定的标签对象 -->
	<input type="checkbox" onchange="checkChange(this)" id="checkAll"/>全选/全不选<br/>
	<div>
		<input type="checkbox" name="hobby"/>你看那遥远的路&nbsp;
		<input type="checkbox" name="hobby"/>睁眼便是黄昏&nbsp;
		<input type="checkbox" name="hobby"/>自有引力&nbsp;
		<input type="checkbox" name="hobby"/>少年不识愁滋味&nbsp;
	</div>
	
	<div>
		<input type="button" id="btn_checkAll" onclick="checkAll(true)" value="全选"/>
		<input type="button" onclick="checkAll(false)" value="全不选"/>
		<input type="button" onclick="checkUnAll()" value="反选"/>
	</div>
</body>
</html>

JavaScript代码：

javascript 复制代码

//实现标签中的全选或全不选
function checkChange(tag){
    let hobbies = document.getElementsByName('hobby');
    //遍历存储所有歌曲的数组，获取每一个标签
    for (let i = 0; i < hobbies.length; i++) {
        //获取参数对象，将其设置给每一个选项
        hobbies[i].checked = tag.checked;
    }
}
//实现按钮全选或全不选
function checkAll(ch){
    //通过name属性 获取所有的爱好复选框
    let hobbies = document.getElementsByName('hobby');
    //遍历存储所有歌曲的数组，获取每一个歌曲标签
    for (let i = 0; i < hobbies.length; i++) {
        //将参数值设置给每一个歌曲属性checked
        hobbies[i].checked = ch;
    }
}
//实现按钮的反选操作
function checkUnAll(){
    let hobbies = document.getElementsByName('hobby');
    //遍历存储所有歌曲的数组，获取每一首歌标签
    for (let i = 0; i < hobbies.length; i++) {
        //获取当前歌曲属性值 反向设置
        hobbies[i].checked = !hobbies[i].checked;
    }
}

鼠标悬停更改图片内容

HTML代码实现img1和img2两张图片切换，通过鼠标移动事件来完成，JavaScript代码如下head标签中<script>内

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>换一个</title>
    <script>
        //鼠标移入和移出时，图片改变事件
        function changeImg(url){
            //获取img标签对象
            let img = document.getElementById('green');
            //通过img标签对象，调用方法，将参数设置给其src属性
            img.setAttribute('src',url);
        }
    </script>
</head>
<body>
    <img src="images/lHl.png" onmouseover="changeImg('images/img1.jpg')"
         onmouseout="changeImg('images/img2.png')" id="green">
</body>
</html>

实现数据新增，显示在列表中，可以删除一条及全部删除但保留表结构

如上图，实现可以输入歌名、歌手、作曲，进行数据添加，添加后显示在下方列表当中，当点击右侧删除，可以进行选中行歌曲的删除，选择删除所有，则删除全部内容数据，但保留表结构行

HTML代码：

html 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>歌曲添加</title>
	<script type="text/javascript" src="js/song.js"></script>
</head>
<body>
	<form name="songForm">
		<center>
			歌曲录入<br/>
			歌名:<input id="sName" name="sName" type="text" size=15/>
			歌手:<input  id="singer" name="singer" type="text"  size=15/>
			作曲:<input id="compose" name="compose" type="text" size=15/>
			<input type="button" value="添加" id="btn_submit" onclick="add()"/>
			<input type="button" value="删除所有" id="btn_removeAll"/>
		</center>
	</form>
	<hr/>
	<table border="1" align="center" cellpadding=0 cellspacing=0 width=400> 
		<thead>
			<tr>
				<th>歌名</th>
				<th>歌手</th>
				<th>作曲</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="songTbody">
			<tr id="tr1">
				<td>爱是一把枪</td>
				<td>隔壁老樊</td>
				<td>樊凯杰</td>
				<td><a href="javascript:deleteSong('tr1')">删除</a></td>
			</tr>
		</tbody>
	</table>
</body>
</html>

JavaScript代码：

javascript 复制代码

//向表格中添加一行数据
function add(){
    //通过document对象调用方法，创建一个tr和4个td
    let tr = document.createElement('tr');
    let sNameTd = document.createElement('td');
    let singerTd = document.createElement('td');
    let composeTd = document.createElement('td');
    let delTd = document.createElement('td');
    //由于每个单元格中的文本内容是通过文本框输入，因此获取指定文本框输入的值
    let sName = document.getElementById('sName').value;
    let singer = document.getElementById('singer').value;
    let compose = document.getElementById('compose').value;
    //将获取的指定单元格的文本内容，赋值给对应单元格
    sNameTd.innerHTML = sName;
    singerTd.innerHTML = singer;
    composeTd.innerHTML = compose;
    // 设置删除单元格中的文本内容 -- 参考已给示例-设置超链接删除
    delTd.innerHTML = '<a href="#" onclick="deleteSong(this)">删除</a>';
    //通过tr对象，调用方法，将每个td按顺序追加
    tr.appendChild(sNameTd);
    tr.appendChild(singerTd);
    tr.appendChild(composeTd);
    tr.appendChild(delTd);

    //追加到tbody中
    let body = document.getElementById('songTbody');
    body.appendChild(tr);
}
function deleteSong(tag){
    //通过参数对象，调用获取父类方法，获取要删除数据在的行 获取顺序：<a>-<td>-<tr>
    let tr = tag.parentElement.parentElement;
    let body = document.getElementById('songTbody');
    body.removeChild(tr);
}

//实现清空表中所有数据，但是保留表结构，由于没有绑定事件，需要先加载标签对象，再绑定事件
window.onload = function (){
    //获取删除所有标签对象
    let btn = document.getElementById('btn_removeAll');
    //通过删除所有标签对象，调用属性onclick，绑定事件
    btn.onclick = function (){
        //获取tbody标签对象
        let body = document.getElementById('songTbody');
        //设置文本内容为空
        body.innerHTML = '';
    }
}

说明：示例中出现的歌手及歌名只展示个人听歌喜好，无其他任何~