Js 事件实例

最新推荐文章于 2024-07-22 08:55:10 发布

Owen被占用

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量587

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/codinghome/article/details/8535184

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<html>
<head>
<script type="text/javascript">
	
/**
W3C DOM
•	obj.addEventListener(evtype,fn,useCapture)——W3C提供的添加事件处理函数的方法。obj是要添加事件的对象，evtype是事件类型，不带on前缀，fn是事件处理函数，如果useCapture是true，则事件处理函数在捕获阶段被执行，否则在冒泡阶段执行
•	obj.removeEventListener(evtype,fn,useCapture)——W3C提供的删除事件处理函数的方法
微软IE方法
•	obj.attachEvent(evtype,fn)——IE提供的添加事件处理函数的方法。obj是要添加事件的对象，evtype是事件类型，带on前缀，fn是事件处理函数，IE不支持事件捕获
•	obj.detachEvent(evtype,fn,)——IE提供的删除事件处理函数的方法，evtype包含on前缀

**/
function addEvent(obj,evtype,fn,useCapture){
	if(obj.attachEvent){
		obj.attachEvent("on"+evtype,fn);//IE
		//alert("IE");
	}else{
		obj.addEventListener(evtype,fn,useCapture);//FF
	}
}

    var _closeWin = function(){
		   document.getElementsByTagName("button")[0].disabled = false;
	}
	var _clickP = function(){
		var p = document.getElementsByTagName("p")[0];
		p.innerHTML = "Change";
		//p.style.backgroundImage = url(IMG_20130119_144221.jpg);
	}
	function generate(){
		var _code = document.getElementById("_code").value;
		var btn = document.getElementsByTagName("button")[0];
		btn.disabled = true;
		var mywin = window.open("","_blank",'width=500,height=400,left=200,top=200');
		mywin.document.write(_code);
		//alert(_code);
		addEvent(mywin,"unload",_closeWin,true);//onunload
		addEvent(document.getElementsByTagName("p")[0],"click",_clickP,true);
		//mywin.onunload = _closeWin;
	}
	function clearCodes(){
		var code = document.getElementById("_code");
		code.value = "";
	}
	//window.onload = generate;
</script>
</head>
<body> 
<div id="_content">
<textarea id = "_code" cols= "80" rows = "50">Code
</textarea>
<button οnclick="generate();">generate</button>
<button οnclick="clearCodes();" >clear</button>
<p>OK!</p>
</div>
</body>
</html>

<html>
<head>
<style type="text/css">
 p.ct{
border-style: double;
}
span.ct{
padding:2px;
background-color:#EAEAEA;
border-style:outset;

border-color:#000000;
cursor:pointer;
//color:#EAEAEA;
}
</style>
</head>

<body>
<script type="text/javascript">
 function test(){
  var _d = document.getElementById("_d");
  var len = _d.childNodes.length;
  //alert(len);
  var spanArr = [];
  for(var i = 0; i<len;i++){
     if(_d.childNodes[i].nodeName=="SPAN"){
        spanArr.push(_d.childNodes[i]);
     }
  }

_d.insertBefore(spanArr[1],spanArr[0]);
 }
</script>
 <p class = "ct">aaabbbbcccc</p>
<div id = "_d">
<span id="g1" class = "ct" οnclick="test();"> GO1 </span>
<span id="g2" class = "ct"> GO2 </span>
<span id="g3" class = "ct"> GO3 </span>
</div>
</body>
</html>

<html>
<head>
<style type="text/css">
#d1{
padding:40px;
border: 4px solid #E9E8EB;
background-color:#FFEE97;
}
#d2{
position:relative;
top:20px;
left:30px;
padding:40px;
border: 4px solid #E9E8EB;
background-color:#FFEE97;
}
#d3{
padding:40px;
border: 4px solid #E9E8EB;
background-color:#FFEE97;
}

</style>
</head

<body>
<br/>
<span id="d1">
 D1
</span >
<span id="d2">
 D2
</span >
<span  id="d3">
 D3
</span >
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#customers
  {
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  width:100%;
  border-collapse:collapse;
  }

#customers td, #customers th 
  {
  font-size:1em;
  border:1px solid #98bf21;
  padding:3px 7px 2px 7px;
  }

#customers th 
  {
  font-size:1.1em;
  text-align:left;
  padding-top:5px;
  padding-bottom:4px;
  background-color:#A7C942;
  color:#ffffff;
  }

.alt
  {
  color:#000000;
  background-color:#EAF2D3;
  }
</style>
<script>
(function(){
    function addEvent(obj, evtype, fn, useCapture) {
        if (obj.attachEvent) {
            obj.attachEvent("on" + evtype, fn); //IE
        } else {
            obj.addEventListener(evtype, fn, useCapture); //FF
        }
    }
	function getEventObj(e) {
        var evl = e || window.event;
        var obj = evl.srcElement || evl.target;
        return obj;
    }
	var allObjs = [];
	function selectObj(e){
		var td = getEventObj(e);
		td.style.cursor = "text";
		if(allObjs.legth>0){
			allObjs = [];
		}else{
			allObjs.push(td);
		}
	}
	function selectTD(){
		for(var obj in allObjs){
			obj.className = "alt";
		}
	}
	function load(){
		var tdObjs = document.getElementsByTagName("td");
		for(var i = 0,len = tdObjs.length;i<len;i++){
			addEvent(tdObjs[i],'mouseover',selectObj,true);
			addEvent(tdObjs[i],'mouseup',selectTD,true);
		}
	}

window.onload = load;
})();
</script>
</head>

<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>

<tr>
<td>Apple</td>
<td>Steven Jobs</td>
<td>USA</td>
</tr>

<tr>
<td>Baidu</td>
<td>Li YanHong</td>
<td>China</td>
</tr>

<tr>
<td>Google</td>
<td>Larry Page</td>
<td>USA</td>
</tr>

<tr>
<td>Lenovo</td>
<td>Liu Chuanzhi</td>
<td>China</td>
</tr>

<tr>
<td>Microsoft</td>
<td>Bill Gates</td>
<td>USA</td>
</tr>

<tr>
<td>Nokia</td>
<td>Stephen Elop</td>
<td>Finland</td>
</tr>


</table>
</body>
</html>

Owen被占用

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js 事件实例

/**W3C DOM• obj.addEventListener(evtype,fn,useCapture)——W3C提供的添加事件处理函数的方法。obj是要添加事件的对象，evtype是事件类型，不带on前缀，fn是事件处理函数，如果useCapture是true，则事件处理函数在捕获阶段被执行，否则在冒泡阶段执行• obj.removeEventListener(evtype,fn,us
复制链接

扫一扫

专栏目录