隔行换色,那么发生在行上,所以事件写在行上,onmouseover为鼠标移动到该区域,onmouseout为鼠标移出该区域,无论移出,还是移入都调用check方法,这个方法传递两个参数(“”中加引号只能用单引号‘’),第一个是所在行的id用于获取改行,另一个是类型,over表示移入,out表示移出,方法内部根据这两个参数来判断具体情况,over时背景颜色为红色,表示高亮显示,out时背景颜色为白色,效果为
光标放在第一行
光标离开第一行
上面完成了基本的要求,但是他还有以下不足之处,比如给每行都添加了事件,如果行太多,这种静态的添加事件不太合适,所以我们应该动态遍历到所有的行,然后js中动态添加方法,这样就不用给每一行,动态的添加事件了,而且在上面代码中是在js中设置了背景颜色,这样不好应该js和css分开,所以只要在js中设置好移入时行的classname,然后css中显示移入时的样式,和移出时行的classname,然后css中显示移出时的样式
以上程序就是动态给每行添加了移入和移出两个事件,然后方法内部设置成每行在移入移出时不同的className,不同的className对应不同的样式,所以就会产生不同的效果了。
注意这里是this,而不是trs[x],因为这里添加事件之后,事件只会在onmouseover的时候才会运行,就是鼠标移入的时候,而运行的时候根本不知道tr[x]是什么了,所以这里只能用this,this表示当前事件的源对象,把当前事件的源对象的className设置成对应的样子即可。
js中常用事件的总结
onfocus/onblur:聚焦离焦事件,用于表单校验的时候比较合适。
onclick/ondblclick:鼠标单击和双击事件
onkeydown/onkeypress:搜索引擎使用较多,比如一回车他就自动搜索
onload:页面加载事件,所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称,那么在html页面中只能写一个。
onmouseover/onmouseout/onmousemove:购物网站商品详情页。
onsubmit:表单提交事件 ,有返回值,控制表单是否提交。
onchange:当用户改变内容的时候使用这个事件(二级联动)
onkeypress举例
function keyDemo(){
领取专属 10元无门槛券
私享最新 技术干货