因为我们手动交互某一行为,首先是让它的某些属性发生变化,其次是让它触发某事件。想明白这一点就简单了。让属性发生变化,当然是改动其固有属性,因此 setAttribute(aaa,bbb)便出局了,因此它是用来设置自定义属性(IE678另谈,那是怪胎)。想触发事件,我们可以用fireEvent或dispathEvent,阿狸从雅虎的YUI搞了一个event-simulate,想得更加周全,大家想深入可以参考一下。
下面就是我的成果了:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="avalon.js"></script> <script> var model = avalon.define("test", function(vm) { vm.array = ["aaa", "bbb", "ccc", "ddd"] vm.selected = "ddd" vm.$watch("selected", function(a) { avalon.log(model.$model.selected) }) }) function fireEvent(element, event) { if (document.createEventObject) { var evt = document.createEventObject(); return element.fireEvent('on' + event, evt) } else { var evt = document.createEvent("HTMLEvents"); evt.initEvent(event, true, true) return !element.dispatchEvent(evt); } } setTimeout(function() { var el = document.getElementById("aaa") el.options[1].selected = true//改动属性 fireEvent(el, "change")//触发事件 }, 3000) </script> </head> <body> <div ms-controller="test"> <select ms-duplex="selected" id="aaa"> <option ms-repeat="array" ms-value="el">{{el}}</option> </select> </div> </body> </html>
当然现在这样做是不够严谨,因为我是用人脑承担了一些计算量。我们需要知道它是否发生了改变。因此有一个比较前后值的函数,这个可以看这里。
查看本栏目更多精彩内容:http://www.bianceng.cnhttp://www.bianceng.cn/webkf/script/
以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索function
, 属性
, document
, element
, selected
, 模拟下拉框
fireEvent
控制下拉框option宽度、option下拉框 css样式、下拉框option样式、css 下拉框option宽度、下拉框option设置属性,以便于您获取更多的相关知识。