尝试如下代码，在 Friefox 54 及 IE 11 下测试可行
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="checkbox" id="checkbox1" value="跑步"> 跑步
<input type="checkbox" id="checkbox2" value="打球"> 打球
<input type="checkbox" id="checkbox3" value="登山"> 登山
<input type="checkbox" id="checkbox4" value="游泳"> 游泳
<input type="checkbox" id="checkbox5" value="骑车"> 骑车
<div id="div1">
</div>
</body>
<script>
var objdiv = document.getElementById('div1')
for(i=1 i<6 ++i) {
var objchk = document.getElementById('checkbox' + i)
objchk.addEventListener('click', function(e) {
//获取当前正在点击的 Checkbox对象
var objchk = e.target
//获取已生成的 Input 对象
var objipt_exist = document.getElementById('ipt' + objchk.id)
if(objchk.checked) {
//如果 Checkbox 选中状态下对应的 Input 已存在，就返回，以防重复添加Input
if(objipt_exist) {
return
}
//如果文本框不存在，在 div1 容器中动态添加 Input
var objipt = document.createElement('input')
objipt.setAttribute('value', objchk.value)
objipt.setAttribute('id', 'ipt' + objchk.id)
objdiv.appendChild(objipt)
} else {
//从div1中移除已存在的 Input
objdiv.removeChild(objipt_exist)
}
}, false)
}
</script>
</html>
主动触发事件是一个经常会用到的技巧，它很重要。它和事件绑定一样存在着浏览器兼容性问题。传统浏览器（IE8-）使用createEventObject来创建事件对象，用fireEvent这个方法来触发事件；现代浏览器用createEvent来创建对象，用dspatchEvent来触发事件。//获取浏览器版本
var isIE=navigator.userAgent.match(/MSIE (\d)/i)
isIE=isIE?isIE[1]:undefined
//事件函数
function onclick(e){
e=e||event
alert(e.msg||"表酱紫啦，人家羞涩啦～")
}
//给document绑定一个点击事件
isIE<9
//传统浏览器使用attachEvent
?document.attachEvent("onclick",onclick)
//现代浏览器使用addEventListner
:document.addEventListener("click",onclick,false)
//触发自定义事件
if(isIE<9){
//传统浏览器
//创建对象
var event=document.createEventObject()
//给事件对象添加属性
event.msg="我是fireEvent触发的"
//触发事件
document.fireEvent("onclick",event)
}else{
//现代浏览器
//创建事件对象
var e=document.createEvent("MouseEvents")
//初始化事件对象
e.initMouseEvent("click"),
//给事件对象添加属性
e.msg="我是despatchEvent触发的"
//触发事件
document.dispatchEvent(e)
}
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<title>
RunJS 演示代码
</title>
<style>
#content{
text-overflow: ellipsis
overflow: hidden
white-space: nowrap
width:200px
}
</style>
<script>
onload = function(){
content.onmouseover = function(){
this.title = this.innerHTML
}
}
</script>
</head>
<body>
<div id='content'>
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
</div>
</body>
</html>
