|
今天学习了几个简单的小效果，主要就是判断语句、随机数、设置元素样式和鼠标事件的学习，今天就拿来和大家分享一下。
第一个是鼠标移入和移出事件，HTML和JS代码如下：
| 代码如下 |
复制代码 |
|
<div id="main">
<label id="tishi"><input type="checkbox" />两周内自动登陆</label>
<p id="xinxi">为了您的信息安全，请不要在公共电脑或网吧使用此功能！</p>
</div>
window.onload=function (){
var oLabel=document.getElementById('tishi');
var oP=document.getElementById('xinxi');
oLabel.onmouseover=function (){
oP.style.display='block';
};
oLabel.onmouseout=function (){
oP.style.display="none";
};
};
|
从最外层的代码说起，onload的作用，因为浏览器解析代码的时候是一行一行的依次从上往下来的，所以当解析到var oLabel=document.getElementById('tishi')时，因为下面body里的代码还没解析，所以会出现找不到的错误，当把代码放到onload里时，则代表当网页加载完成之后，再执行onload里的代码。
获取元素，这里用的是通过id选择元素getElementById()，当然相似的还有getElementsByTagName()，这个是通过标签名选择一组元素，返回的是节点列表，只可惜没有通过class选择元素的方法。
选择好元素之后，那就是往元素身上添加事件了，当鼠标移入的时候显示提示框，那就要用到onmouseover事件，表示鼠标移到oLabel身上，就让下面的提示框显示，同理onmouseout事件也是这样，至于显示隐藏，那就是改变元素的display值啦，隐藏是none，显示就是除了none的其他值。
第二个是点击显示或隐藏：
| 代码如下 |
复制代码 |
|
<input type="button" id="btn" value="显示/隐藏www.111cn.net" />
<div id="div1"></div>
window.onload=function (){
var oBtn=document.getElementById('btn');
var oDiv=document.getElementById('div1');
oBtn.onclick=function (){
if(oDiv.style.display=="block"){
oDiv.style.display='none';
}else{
oDiv.style.display='block';
}
};
};
|
判断语句，因为学的专业就是Java方向的，所以这些基本的语句大部分语言都一样，但是在上面的JS里这个效果还是有点小问题的，当页面加载完成后，点击第一下元素并不会隐藏，这是为什么呢？因为JS修改样式修改的是内联样式，当然判断的时候也是依靠内联样式判断的，当页面加载完成后，div并没有内联样式，所以当第一次点击的时候，会判断div的display为一个空字符串，转为布尔值就是false，这时会执行else后的语句，所以div依然是显示状态，解决这个问题也很简单，只要把判断条件反过来写就可以了。代码如下：
| 代码如下 |
复制代码 |
window.onload=function (){
var oBtn=document.getElementById('btn');
var oDiv=document.getElementById('div1');
oBtn.onclick=function (){
if(oDiv.style.display=="none"){
oDiv.style.display='block';
}else{
oDiv.style.display='none';
}
};
};
|
还有个和这个原理一样的练习，是播放列表的显示和隐藏，DEMO在这。
第三个是个比较综合的练习，涉及的内容有随机数和随机颜色。
| 代码如下 |
复制代码 |
|
<div id="div">
<input type="button" id="changeWidth" value="改变宽度" />
<input type="button" id="changeHeight" value="改变高度" />
<input type="button" id="changeColor" value="改变颜色" />
<input type="button" id="hidden" value="隐藏" />
<input type="button" id="show" value="显示" />
<div id="box"></div>
</div>
window.onload=function (){
var oWidth=document.getElementById('changeWidth');
var oColor=document.getElementById('changeColor');
var oHeight=document.getElementById('changeHeight');
var oShow=document.getElementById('show');
var oHidden=document.getElementById('hidden');
var oBox=document.getElementById('box');
oWidth.onclick=function (){
var w=parseInt(Math.random()*801);
oBox.style.width=w+'px';
};
oHeight.onclick=function (){
var h=parseInt(Math.random()*601);
oBox.style.height=h+'px';
};
oColor.onclick=function (){
var r=parseInt(Math.random()*256);
var g=parseInt(Math.random()*256);
var bl=parseInt(Math.random()*256);
oBox.style.background='rgb('+r+','+g+','+bl+')';
};
oShow.onclick=function (){
oBox.style.display='block';
};
oHidden.onclick=function (){
oBox.style.display='none';
};
};
|
随机数，Math对象里的random()方法，可以产生0-1之间的随机数，至于包不包含0这个问题各个书上说的都不一样，但是不包含1是共识。取整，parseInt()将其他类型转换为整数，好啦，包不包含0反正取整之后肯定会出现0的。改变宽高的效果实现原理是产生一个最大800的随机数，高是最大600，因为random()产生的数是小于1的，如果乘以800的话，最大只能产生799.xxx的数，取整后最大只能是799，所以这里需要乘以801以便能取到800这个数。下面的高度和颜色同理。随机颜色用的是RGB表示方法，随机出3个0-255的数，然后放到rgb()里。这样就实现了随机颜色的效果。
附一些实例
元素添加事件是最简单和向后兼容性最好的Javascript事件添加方法，例如：
<input type="text" value="Happy everyday!" onclick="alert(this.value)" />这时鼠标点击文本字段，则会弹出该文本字段属性value的值"Happy everyday!"。
往往事件处理不仅有 alert(this.value) ，会包含很多行代码，所以通常会把代码写入事件处理函数中，用onclick属性调用处理函数。
例一：www.111cn.net
| 代码如下 |
复制代码 |
|
<input type="text" value="Happy everyday!" onclick="myFunc()" />
<script>
function myFunc(){
alert(this.value); // output undefined
//more of the script statements
}
</script>
|
点击鼠标后，结果却输出 undefined ，我们先接着看下面的实例：
例二：
| 代码如下 |
复制代码 |
|
<input type="text" value="Happy everyday!" onclick="myFunc()" />
<script>
var value = 'Happy New Year!';
function myFunc(){
alert(this.value); // output "Happy New Year!"
//more of the script statements
}
</script>
|
可以发现输出为"Happy New Year!"，根据以上两个实例，可以得出this指向的是window对象，或者说函数myFunc无法找到其调用对象，所以输出的是window对象value属性的值"Happy New Year!"。为什么this指向window对象呢？请接着看实例：
例三：
| 代码如下 |
复制代码 |
|
<input type="text" value="Happy everyday!" onclick="myFunc(this)" />
<script>
var value = 'Happy New Year!';
function myFunc(obj){
alert(obj.value); // output "Happy everyday!"
//more of the script statements
}
</script>
|
这次终于得到我们期望的结果"Happy everyday!"，根据例二、例三，我得出非官方的结论：
在每一个事件处理函数外部都会初始化的被加入一个匿名函数，所以函数myFunc找不到其调用对象，根据js作用域机制，this只能指向window对象，下面举个不恰当但能解释此结论的例子：
例四：
| 代码如下 |
复制代码 |
|
<input type="text" value="Happy everyday!" />
<script type="text/javascript">
var value = 'Happy New Year!';
function myFunc(){
alert(this.value); // output "Happy New Year!"
//more of the script statements
}
document.getElementsByTagName('input')[0].onclick = function () {
alert(this.value); // output "Happy everyday!"
myFunc(); // output "Happy New Year!"
}
</script>
|
至此，元素添加事件分析完毕，还望指教！
现今国内互联网环境，在html元素上添加事件还很常见，但大多是较为复杂的前端交互中用到，最典型的是邮箱；在各个js框架中，则清一色的选择addEventListener || attachEvent，这也是w3c与前端大佬们都推荐的；而我图省事，在没有框架的小的项目中，会选择对象添加事件。
每一种添加事件的方式都有利弊吧，根据实际情况选择就ok。除了元素添加事件外，还有下面4种常见添加事件方法：
对象添加事件：
| 代码如下 |
复制代码 |
|
<input type="text" value="Happy everyday!" />
<script>
document.getElementsByTagName('input')[0].onclick = function(){
alert(this.value);
}
</script><script for> 标识符添加事件：
<input type="text" id="input" value="Happy everyday!" />
<script for="input" event="onclick"> //属性for的值是相应元素的id
alert(this.value);
</script>
|
注：由于此方法最早由微软提出，至今未被w3c组织采纳，所以只适用于ie浏览器。如果采用这种添加方式，就意味着您必须为每一个要添加事件的元素创建一个 <script for> 标识。
attachEvent 方法添加事件：
| 代码如下 |
复制代码 |
|
<input type="text" value="Happy everyday!" />
<script>
function myFunc(){
alert(this.value); // output undefined
// more of the script statements
}
document.getElementsByTagName('input')[0].attachEvent("onclick", myFunc);
</script>
|
注：此方法也为ie专属，其它浏览器用 addEventListener 方法，由于attachEvent原生的未能将this绑定到调用对象，所以输出undefined，John Resig 和 Dean Edwards 都已很好的解决此问题，可以自行搜索！
addEventListener 方法添加事件：
| 代码如下 |
复制代码 |
|
<input type="text" value="Happy everyday!" />
<script>
function myFunc(){
alert(this.value);
}
document.getElementsByTagName('input')[0].addEventListener("click", myFunc);
</script>
|
注：此方法是W3C DOM标准定义的。
对于增加动态正事件我们可看看下面例子
Javascript为元素动态的添加事件包括两种情况：
不带参数的事件和带参数的事件。
一、不带参数的事件：
两种方式：直接给对象添加事件,节点添加事件
例如给一个id为tab1的添加onclick事件
第一种情况：
| 代码如下 |
复制代码 |
|
var t = document.getElementById("NewTitle");
t.onclick = function showmsg(){
alert('Hello!World');
}
|
第二种情况 这种情况更加动态，更为实用，而且还能添加多个函数(添加的事件的顺序即执行顺序)，呵呵
| 代码如下 |
复制代码 |
var tb = document.getElementById("NewTitle");
if(window.addEventListener){ // Mozilla, Netscape, Firefox
td_value.addEventListener('click', alert('cc'), false);
td_value.addEventListener('click', alert('cc'), false);
} else { // IE
td_value.attachEvent('onclick', function(){alert('changchang');});
td_value.attachEvent('onclick', function(){alert('changchang');});
} |
二、带参数的事件
这里的functionName就是事件处理函数，如果是带参数的那该怎么办，
有人说是这样:
| 代码如下 |
复制代码 |
|
element.onclick=function(sb){
alert(sb);
}
|
是不是上面的那种写法呢？答案是不正确的。
解决方法：匿名函数：
| 代码如下 |
复制代码 |
|
element.onclick=function() {
functionName(param);
};
|
这样就巧妙的通过匿名方法实现了！
付出最大努力，追求最高成就。 |
